Как передать компоненты другому компоненту?

Question

Я пытаюсь сделать свой собственный мастер шагов (я видел несколько онлайн, но ни один из них не соответствует моим потребностям), и это будет хорошей практикой.

У меня будет StepWizard, и я хочу передать этому мастеру шагов массив json, который будет выглядеть следующим образом

 const steps =   [ { name: "Step 1", component: <Step /> }, { name: "Step 2", component: <Step2 /> }, { name: "Step 3", component: <Step3 /> }]

Каждый «Шаг» - это собственный компонент.

 <StepWizardComponent  steps={this.steps}/>

Когда я делаю console.log (this.props) в StepWizardComponent, я просто вижу ноль.

Я использую реагирование 16.

Answer 1

Если вы хотите использовать «const» в функции рендеринга, вам нужно объявить const вне класса.Если вы хотите, чтобы переменная была объявлена ​​в конструкторе класса, вы можете использовать «this».

Вы можете увидеть пример «this» в этом фрагменте кода.

class Wizard extends React.Component{
	render(){
  	   console.log("this.props are..", this.props);
  
  	   return(
    	    <div>
    	       {this.props.steps.map((step, rowId) =>{
        	  return (<div key={rowId}>{step.name} {step.component} </div>);
                })}
    	   </div>
    );
  }
}

class Step extends React.Component{
	render(){
  	   return(
    	    <div style={{width:'100%', backgroundColor:'red'}}>I am Step component</div>
           );
     }
}

class Step2 extends React.Component{
	render(){
  	    return(
    	    <div style={{width:'100%', backgroundColor:'green'}}>I am Step2 component</div>
        );
    }
}

class Step3 extends React.Component{
	render(){
  	    return(
    	    <div style={{width:'100%', backgroundColor:'yellow'}}>I am Step3 component</div>
        );
     }
}


class Hello extends React.Component {
  constructor(props){
    super(props);
    
    this.steps = [ { name: "Step 1", component: <Step /> }, { name: "Step 2", component: <Step2 /> }, { name: "Step 3", component: <Step3 /> }];
   }
  
  
  render() {
    return (
     <div>
      Hello
      <Wizard steps = {this.steps}/>
    </div>);
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

<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="container">
    <!-- This element's contents will be replaced with your component. -->
</div>