React 组件访问道具

Posted 2023-02-22

【中文标题】React 组件访问道具

【英文标题】：React Component access Props

【发布时间】：2020-05-04 19:27:28

【问题描述】：

是否可以访问 React 组件的内部属性？

React 组件的示例通常将 prop 类型显示为 html/XML 内部属性：

<MyComp paramOne='val1' paramTwo='val2' />

该类将是：

import * as React from 'react';

export interface MyCompProps 
    paramOne: string;
    paramTwo: string;


export interface MyCompState 



export class MyComp extends React.Component<MyCompProps, MyCompState> 
    public render() 
        return <div>
            <ul>
                <li>paramOne: this.props.paramOne</li>
                <li>paramTwo: this.props.paramTwo</li>
            </ul>
        </div>;
    

在下面的示例代码中是否可以访问val3？

<MyComp paramOne='val1' paramTwo='val2'>val3</MyComp>

【问题讨论】：

是的，那就是children。

我不确定我是否理解正确，但我认为val3 可以在this.props.children 内访问class MyComp

【参考方案1】：

您的val3 可以通过children 属性访问。

export class MyComp extends React.Component<MyCompProps, MyCompState> 
    public render() 
        return <div>
            <ul>
                <li>paramOne: this.props.paramOne</li>
                <li>paramTwo: this.props.paramTwo</li>
                <li>children: this.props.children</li>
            </ul>
        </div>;
    

<MyComp paramOne='val1' paramTwo='val2'>val3</MyComp>