React的props用法详解

一、解决了什么问题？

props是组件（包括函数组件和class组件）间的内置属性，用其可以传递数据给子节点。

二、怎么使用？

1、只读

props在传递数据的过程中，是只读的不能修改。

class App extends React.Component {
    // 第一步：给节点设置属性 `theme`
    render() {
        return <Toolbar theme="dark" />;
    }
}

function Toolbar(props) {
    // 第二步：子节点可以访问父节点的props属性，但只能读取不能修改
    return (
        <div>
            <ThemedButton theme={props.theme} />
        </div>
    );
}

class ThemedButton extends React.Component {
    // 第三步：孙子节点依然可访问props属性，同样只能读不能修改 
    render() {
        return <Button theme={this.props.theme} />;
    }
}

2、{…props}

展开props属性的一种简洁写法，属于 js展开语法 。