React 学习笔记之属性 props

React 的每一个组件都可以包含一些数据，这些数据一般情况下都是父组件传递进来的。这个过程就像我们给一个可变参数的函数传递参数一样，只不过组件内部接受到这些参数时，都是在 this.props 这个成员中。该功能一般用于组件之间传递数据使用。

演示代码

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

class App extends Component {
  render() {
    return (
      <div>
        <Welcome name="Sara" />
        <Welcome name="Cahal" />
        <Welcome name="Edite" />
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

代码解析

首先我们从入口的 ReactDOM.render 中将 App 组件作为主程序展示到界面上。而 App 组件中又使用了 Welcome 组件，在使用 Welcome 组件的同时我们给 Welcome 组件传递了一个 name 的属性。且我们调用了三次 Welcome 组件，这样 Welcome 组件就会被渲染三次，显示三个不同的名字。

在 Welcome 组件内部很简单，就是用一个 h1 标签显示了名字的信息，而名字的信息则使用了 {this.props.name} 访问到我们传递进去的 name 属性。最终效果如下：

注意事项

另外需要注意的是，props 里面的数据只能只读访问，不应该去修改 props 里面的数据。这是 React 固有的一些规则。