React开发教程8 – Props简介
本教程由好办法汇总原创
状态state和属性props 之间的主要区别是 props 的数据是不变的。这就是为什么container容器组件来定义需要更新的状态。而子组件只是用props来传递来自state的数据。
使用 Props (属性)
当你的组件需要不变的data时候,你可以添加props到main.js的reactDOM.render() 方程中,并在组件中使用。
App.jsx
import React from 'react'; class App extends React.Component { render() { return ( <div> <h1>{this.props.headerProp}</h1> <h2>{this.props.contentProp}</h2> </div> ); } } export default App;
main.js
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content from props..."/>, document.getElementById('app')); export default App;
以上代码的输出效果如下图。
默认的Props
你可以用组件component的constructor设置 property 的默认值,而不需要在 reactDom.render() 中添加元素。
App.jsx
import React from 'react'; class App extends React.Component { render() { return ( <div> <h1>{this.props.headerProp}</h1> <h2>{this.props.contentProp}</h2> </div> ); } } App.defaultProps = { headerProp: "Header from props...", contentProp: contentProp = "Content from props..." } export default App;
main.js
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App/>, document.getElementById('app'));
用constructor设置默认props后,效果和之前是一样的。
State 和 Props
以下例子演示如何结合使用 state 和 props。我们在父级component中设置 state ,并通过组件树来使用props。 在 render 方程中,我们设置了在子component中使用的 headerProp 和 contentProp。
App.jsx
import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = { header: "Header from props...", "content": "Content from props..." } } render() { return ( <div> <Header headerProp = {this.state.header}/> <Content contentProp = {this.state.content}/> </div> ); } } class Header extends React.Component { render() { return ( <div> <h1>{this.props.headerProp}</h1> </div> ); } } class Content extends React.Component { render() { return ( <div> <h2>{this.props.contentProp}</h2> </div> ); } } export default App;
main.js
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App/>, document.getElementById('app'));
输出效果和之前两个例子是一样的。
唯一不同是的数据的源头。这个例子中数据来自 state。当我们需要更新子component中的props时候,我们只需要更新父component中的state。