React 学习笔记之属性 props

• 2020 年 1 月 5 日
• 笔记

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 固有的一些规则。