Question

我正在尝试制作自己的步骤向导（我在网上看到了一些，但没有一个真正满足我的需求），这将是一个很好的做法。

我将有一个StepWizard，我想向这个步骤向导传递一个json数组，看起来像这样

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

每个“步骤”都是它自己的组件。

 <StepWizardComponent  steps={this.steps}/>

当我在StepWizardComponent中执行console.log（this.props）时，我只看到null。

我正在使用反应16。

Answer 1

如果你想使用＆＃34; const＆＃34;在render函数中，你需要在类之外声明const。如果你想在类构造函数中声明一个变量，你可以使用＆＃34;这个＆＃34;。

你可以看到＆＃34;这个＆＃34;在此代码段中。

＆＃13;

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')
);

＆＃13;

<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>

＆＃13;

如何将组件传递给另一个组件？

1 个答案: