React.js道具分配问题

Question

Hey guys i have one questions about props, something i dont quite understand:

lets say i have the main component named App and a Header component:

In the App i have some html with

and in the Header component i have something like:

Your name is {this.props.name}, your age is {this.props.age}

What i dont understand is where are the props assigned and where used. Does the name={"Max"} assigns the props or the this.props.name assigns the props and then name={"max"} uses it I'm not sure if i explain it correctly but i dont get the directions of the assignment.

Answer 1

If the header component is inheriting from the App component, then it gets its props from the App component.

In your App component you can define those props from its this.state, then assign those states to your header component as a property.

For example:

class App extends Component {
  constructor( props ) {
    super( props );
    this.state = {
      age: 45,
      name: 'Robert'
    }
  }
  render() {
    return (
      <div>
        <Header ageOfPerson={this.state.age} nameOfPerson={this.state.name} />
      </div>
    );
  }

  class Header extends Component {
    constructor( props ) {
      super( props );
    }
    render() {
      <div>
        <p>{ this.props.ageOfPerson } is { this.props.nameOfPerson }s age.</p>
      </div>
    }
  }
}