React官網零基礎學習筆記（2）-通過屬性傳遞數據

原文如下：

---

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.

---