携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

通过 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]

在这里插入图片描述

React函数组件详解

通过 Props 传递数据

函数组件