《React+Redux前端开发实战》—2.2.2 属性（props）

2.2.2  属性（props）

　　state是组件内部的状态，那么组件之间如何“通信”呢？这就是props的职责所在了。通俗来说，props就是连接各个组件信息互通的“桥梁”。React本身是单向数据流，所以在props中数据的流向非常直观，并且props是不可改变的。props的值只能从默认属性和父组件中传递过来，如果尝试修改props，React将会报出类型错误的提示。

　　props示例应用：

　　（源码地址为https://jsfiddle.net/n5u2wwjg/35076/）

　　function Welcome(props) {

　　 return <p>Hello, {props.name}</p>

　　}

　　function App(){

　　 return (

　　   <Welcome name='world' /> // 引用Welcome组件，name为该组件的属性

　　  )

　　}

　　ReactDOM.render(

　　    <App />,

　　document.querySelector("#app")

　　 )

　　上述代码使用了函数定义组件。被渲染的App组件内引用了一个外部组件Welcome，并在该组件内定义了一个名为name的属性，赋值为world。Welcome组件接收到来自父组件的name传递，在界面中展示Hello，World。

　　当然，也可以使用class来定义一个组件：

　　class Welcome extends React.Component{

　　 render() {

　　    return <p>Hello, {this.props.name}</p>;

　　   }

　　}

　　这个Welcome组件与上面函数式声明的组件在React中的效果是一样的。