📌  相关文章
📜  ReactJS-道具概述

📅  最后修改于: 2020-10-20 04:48:33             🧑  作者: Mango

状态和道具之间的主要区别在于道具是不可变的。这就是为什么容器组件应定义可以更新和更改的状态，而子组件应仅使用prop传递状态数据的原因。

使用道具

当我们在组件中需要不可变的数据时，我们可以在prop.main.js中的props到reactDOM.render（）函数中添加属性，并在组件内部使用它。

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         

            
{this.props.headerProp}

            
{this.props.contentProp}

         

      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(, document.getElementById('app'));

export default App;

这将产生以下结果。

反应道具示例

默认道具

您也可以直接在组件构造函数上设置默认属性值，而不是将其添加到reactDom.render（）元素中。

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         

            
{this.props.headerProp}

            
{this.props.contentProp}

         

      );
   }
}
App.defaultProps = {
   headerProp: "Header from props...",
   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(, document.getElementById('app'));

输出与以前相同。

反应道具示例

状态与道具

以下示例显示了如何在应用程序中组合状态和道具。我们在父组件中设置状态，并使用props将其传递到组件树中。在render函数内部，我们设置子组件中使用的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 (
         

            

            
         

      );
   }
}
class Header extends React.Component {
   render() {
      return (
         

            
{this.props.headerProp}

         

      );
   }
}
class Content extends React.Component {
   render() {
      return (
         

            
{this.props.contentProp}

         

      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(, document.getElementById('app'));

结果将再次与前两个示例相同，唯一不同的是我们的数据源，现在该数据源最初来自state 。当我们想要更新它时，我们只需要更新状态，所有子组件都将被更新。有关更多信息，请参见“事件”一章。

反应道具示例