通过 Props 传递数据

让我们试试水，并尝试将数据从电路板组件传输到正方形组件。我们强烈建议您在本教程中编写代码时不要使用复制/粘贴。这将加深你对 react 的记忆和理解。在 board 组件的 rendersquare 方法中，我们将代码重写如下，将名为 value 的 prop 传递给 square：

class ShoppingList extends React.Component {  render() {    return (      <div className="shopping-list">        <h1>Shopping List for {this.props.name}</h1>        <ul>          <li>Instagram</li>          <li>WhatsApp</li>          <li>Oculus</li>        </ul>      </div>    );  }}

class Board extends React.Component {  renderSquare(i) {    return <Square value={i} />;  }}

现在，让我们修改正方形组件的渲染方法，以便无论何时单击正方形，都可以显示当前状态值：在<按钮>标签中，放置此道具。值被此状态替换。价值设置 onclick={…}事件侦听器函数被 onclick={（）=>this.setstate（{value:'x}}）替换。为了更好的可读性，将 classname 和 onclick 的属性写成两行。修改后，方形组件中渲染方法的返回值中的标记变为：

class Square extends React.Component {  constructor(props) {    super(props);    this.state = {      value: null,    };  }
  render() {    return (      <button        className="square"        onClick={() => this.setState({value: 'X'})}      >        {this.state.value}      </button>    );  }}

在方形组件集状态的渲染方法中的 onclick 事件侦听器函数中调用此函数，我们可以在每次单击<按钮>时通知 react 重新渲染方形组件。更新组件后，此状态。value 的值将变成“x”，因此我们可以在游戏板上看到 x。单击任意正方形，将显示 X。每次在组件中调用 setstate 时，react 将自动更新其子组件。

函数组件

接下来，我们将正方形组件重写为函数组件。如果要编写的组件仅包含渲染方法而不包含状态，则更容易使用功能组件。我们不需要定义来自 react 组件类的继承，我们可以定义一个函数，该函数将 props 作为参数，然后返回要呈现的元素。函数组件编写起来不像类组件那么麻烦。许多组件可以使用功能组件编写。用以下函数替换 square 类：

function Square(props) {  return (    <button className="square" onClick={props.onClick}>      {props.value}    </button>  );}

当我们将 square 更改为函数组件时，我们还将 onclick={（）=>this.Props.onclick（）}更改为较短的 onclick={Props.onclick}（请注意，两侧没有括号）。上面提到的 react 元素在 JavaScript 中被视为一级 JavaScript 对象，因此我们可以将 react 元素作为参数传递给应用程序。在 react 中，我们还可以使用 react 元素数组来渲染多个元素。在 JavaScript 中，数组有一个 map（）方法，该方法通常用于将一个数组映射到另一个数组，例如：

const numbers = [1, 2, 3];const doubled = numbers.map(x => x * 2); // [2, 4, 6]