在课堂上反应js道具

Question

我用一个简单的代码面临一个问题。

我的组件标签中有一个道具，叫做名称和年龄。 我想在班级内部使用它

我的代码看起来像这样

export default class App extends Component {

//constructor(props){

//super(props); //}

render(){ return(

  <div className="person">
  <h1>{  }</h1>
  <p> Your age is 37</p>


  </div>

); } }

ReactDOM.render(<App name="john" age="37"/>, document.getElementById('root'));

我想访问组件名称和年龄的属性。 并在上面的html中呈现它们。

Answer 1

您正在将数据传递给App，但实际上并未在JSX中使用它。

export default class App extends Component {

  constructor(props) {
    super(props);
  }

  render() { 
    const {name, age} = this.props;
    return (
      <div>
        <h1>Hello {name}</h1>
        <p> Your age is {age}</p>
      </div>

    ); 
  } 
}

ReactDOM.render(<App name="john" age="37"/>, document.getElementById('root'));