原文如下:
Passing Data Through Props
Just to get our feet wet, let’s try passing some data from our Board component to our Square component.
In Board’s renderSquare
method, change the code to pass a prop called value
to the Square:
class Board extends React.Component {
renderSquare(i) {
return <Square value={i} />;
}
Change Square’s render
method to show that value by replacing {/* TODO */}
with {this.props.value}
:
class Square extends React.Component {
render() {
return (
<button className="square">
{this.props.value}
</button>
);
}
}
Before:
After: You should see a number in each square in the rendered output.
View the full code at this point
Congratulations! You’ve just “passed a prop” from a parent Board component to a child Square component. Passing props is how information flows in React apps, from parents to children.