ReactJS组件状态(State)

广告位

State是数据来源的地方。 我们应该尽可能使状态尽可能简单,并减少有状态组件的数量。 例如,如果有十个组件需…

State是数据来源的地方。 我们应该尽可能使状态尽可能简单,并减少有状态组件的数量。 例如,如果有十个组件需要来自状态(State)的数据,应该创建一个容器组件,以保持所有组件的状态。

使用Props

以下示例代码显示了如何使用EcmaScript2016语法创建有状态的组件。

文件:App.jsx

import React from 'react';    class App extends React.Component {     constructor(props) {        super(props);          this.state = {           header: "Header from state...",           content: "Content from state..."        }     }     render() {        return (           <div>              <h1>{this.state.header}</h1>              <h2>{this.state.content}</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'));  

这将产生以下结果。ReactJS组件状态(State)

贺, 贺朝

关于作者: 贺朝

为您推荐