在React中使用props

概念

React中的props是”properties”的意思。

官方文档定义：“ When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. We call this object “props”.” 。

意思是：当React发现了用户自定义的组件，它会把JSX属性当做一个对象传递给这个组件，传递的这个对象就叫做props。

props常用场景

父组件传递

我们按照定义来举个例子： 现在在父组件Parent里面发现了一个用户自定义的组件Child，它的JSX属性为name=“Huan”，React会把这个属性当做一个对象传递给Child组件，这个对象就是props，也就是对象{name: “Huan”}：

class Parent extends React.Component {
  render() {
    return (
      <div>
        <h1>这里是Parent组件</h1>;
        <Child name="Huan"/>
      </div>
    )
  }
}

子组件接收

子组件Child收到父组件传递过来的props：{name: “Huan”}，在Child组件中，这个props对象中的数据就可以使用了，此处使用 this.props.name，显示内容为Huan。这样就完成了父子组件之间的通讯。

class Child extends React.Component {
  render() {
    return <p>Hello, {this.props.name}</p>
  }
}

注意

基本上就是这样使用props，有几点注意的地方：

• 用户自定义组件必须首字母大写，这样它的标签才能和HTML的标签区分开来。
• props是只读的，它传递对象给组件。
• 并不是所有传递给子组件的数据子组件都必须使用，子组件只需选取合适的数据使用即可。

参考文章为React官网文档，点此查看官网。