无法从道具中获取数据

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组件。