無法從道具中獲取數據

Question

我遇到了prop問題。下面是我的代碼，我不明白爲什麼當我使用{this.props.name}呈現段落時，它不顯示props的名稱。這可能是一個愚蠢的問題，但我剛剛開始與React我的冒險，所以我需要你的幫助。

class CardGenerator extends React.Component{ 
    render(){ 
     return (
      <div> 
       <Name/> 
      </div> 
     ) 
    } 
} 

class Name extends React.Component{ 
    render(){ 
     return <p>{this.props.name}</p> 
    } 
} 

ReactDOM.render(<CardGenerator name='David'/>, document.getElementById('app')) 

Answer 1

因爲您沒有將道具傳遞給Name組件。您正在將名稱傳遞給CardGenerator組件，它將通過this.props.name提供。要訪問Name組件中的內部，您需要再次將該值傳遞給Name組件。

使用此：

class CardGenerator extends React.Component{ 
    render(){ 
     return (
      <div> 
       <Name name={this.props.name}/> 
      </div> 
     ) 
    } 
} 

class Name extends React.Component{ 
    render(){ 
     return <p>{this.props.name}</p> 
    } 
} 

ReactDOM.render(<CardGenerator name='David'/>, document.getElementById('app')) 

檢查工作示例：

class CardGenerator extends React.Component{ 
 
    render(){ 
 
     return (
 
      <div> 
 
       <Name name={this.props.name}/> 
 
      </div> 
 
     ) 
 
    } 
 
} 
 

 
class Name extends React.Component{ 
 
    render(){ 
 
     return <p>{this.props.name}</p> 
 
    } 
 
} 
 

 
ReactDOM.render(<CardGenerator name='David'/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='app'/>

Answer 2

您傳遞name到CardGenerator組件，但隨後的CardGenerator組件未通過name至Name組件。