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