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。