소품에서 데이터를 가져올 수 없습니다.

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

이름 구성 요소에 소품을 전달하지 않으므로. 소품 이름을 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

당신은 CardGenerator 구성 요소에 name을 전달하고 있지만 다음 CardGenerator 구성 요소가 전달되지 않는다 name ~ Name 구성 요소.