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