React属性props用法详解 – ReactJS实战教程 react属性props用法|React

上一章ReactJS实战教程请查看：React状态state用法详解
【React属性props用法详解 – ReactJS实战教程】props代表“属性Properties”，它们是只读组件，它是一个存储标签属性值的对象，工作方式类似于HTML属性。它提供了一种将数据从一个组件传递到另一个组件的方法，它类似于函数参数，将props传递给组件的方式与在函数中传递参数的方式相同。
props是不可变的，所以我们不能从组件内部修改props。在组件内部，我们可以添加称为props的属性，这些属性在组件中是这样可用的，在我们的渲染方法中可以用来渲染动态数据。
当你需要组件中的不可变数据时，你必须将props添加到ReactJS项目main.js文件中的reactDom.render()方法中，并在需要的组件中使用它。它可以在下面的例子中解释。
例子
App.js

import React, { Component } from 'react'; class App extends React.Component { render() { return ( < div> < h1> Welcome to { this.props.name } < /h1> < p> < h4>srcmini - IT开发教程网< /h4> < /p> < /div> ); } } export default App;

mian.js

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(< App name = "SRCMINI" />, document.getElementById('app'));

默认props不必总是在reactDom.render()元素中添加props，你还可以直接在组件构造函数上设置默认的props。它可以在下面的例子中解释。
例子
App.js

import React, { Component } from 'react'; class App extends React.Component { render() { return ( < div> < h1>默认props例子< /h1> < h3>Welcome to {this.props.name}< /h3> < p>srcmini - IT开发教程网< /p> < /div> ); } } App.defaultProps = { name: "SRCMINI" } export default App;

main.js

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(< App/>, document.getElementById('app'));

状态state和属性props你可以在应用程序中组合状态state和属性props，你可以在父组件中设置状态，并使用props在子组件中传递状态，它可以在下面的示例中显示。
例子
App.js

import React, { Component } from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = { name: "SRCMINI", } } render() { return ( < div> < JTP jtpProp = {this.state.name}/> < /div> ); } } class JTP extends React.Component { render() { return ( < div> < h1>State & Props 例子< /h1> < h3>Welcome to {this.props.jtpProp}< /h3> < p>srcmini - IT开发教程网< /p> < /div> ); } } export default App;

main.js