在課堂上反應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'));