从ReactJs中的父级复制道具？
从ReactJs中的父级复制道具？
提问于 2018-06-08 06:48:19
我正在使用reactjs 16。
我正在制作一个向导，我正在尝试设计它，以便我可以在我的网站上任何需要它的地方重复使用它。
以下是我的代码
export default class App extends Component {
constructor(props) {
super(props);
}
render() {
const steps = [ {name: 'Step 1', component: <Step1 /> },
{name: 'Step 2', component: <Step2 /> }];
return (
<React.Fragment>
<WizardComponent steps={steps}/>
</React.Fragment>
);
}
}
import React, { Component } from "react";
import ReactDOM from "react-dom";
import WizardStepCompoent from "./WizardStepCompoent";
export default class WizardComponent extends Component {
constructor(props) {
super();
this.state = {
currentStep: 1
};
}
next(e) {
// need to update the current step look
// const step = this.props.steps.find(x => x.name == "Step 1")
// step.changeToCompleted() ----> go form {name: "Step 1", component: <Step 1/>} to {name: "Step 1", component: <Step 1/>, isCompleted: true}
}
render() {
const props = this.props;
return (
<div>
<div className="steps">
{props.steps.map(step => {
return <WizardStepCompoent step={step} />;
})}
</div>
{props.steps.map(step => {
return step.component; // later on use current state to figure out which one to render ie if currentStep == 1 then only render the 1st component
})}
<button onClick={ (e) => this.next(e) }>Next</button>
</div>
);
}
}
export default class WizardStepCompoent extends Component {
render() {
const props = this.props;
const step = props.step;
var completed = "";
if(step.isCompleted)
{
completed = "step-item is-completed";
} else {
completed = "step-item";
}
return (
<div className={completed}>
<div className="step-marker">
<span className="icon">
<i className="fa fa-check" />
</span>
</div>
<div className="step-details">
<p className="step-title">{step.name}</p>
<p>This is the first step of the process.</p>
</div>
</div>
);
}回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-08 08:23:14
要解决您正在做的事情，您需要克隆元素并将适当的道具传递给它。here is an example in a codepen to see it live
class App extends React.Component {
render() {
const steps = [ {id: 'first', name: 'Step 1', component: <Step1 /> },
{id: 'second', name: 'Step 2', component: <Step2 /> }];
return (
<div>
<WizardComponent steps={steps}/>
</div>
);
}
}
class WizardComponent extends React.Component {
constructor(props) {
super();
this.state = {
currentStep: 0,
completedSteps: {
'first': {completed: false},
'second': {completed: false}
}
};
}
next(e) {
const {currentStep} = this.state
const completedSteps = {...this.state.completedSteps}
const current = this.props.steps[currentStep]
completedSteps[current.id].completed = true
this.setState({currentStep: this.state.currentStep + 1, completedSteps})
}
render() {
const props = this.props;
const {currentStep, completedSteps} = this.state
return (
<div>
<div className="steps">
{props.steps.map(step => {
return <WizardStepCompoent step={step} />;
})}
</div>
{props.steps.map((step, i) => {
return React.cloneElement(step.component, completedSteps[step.id]); // later on use current state to figure out which one to render ie if currentStep == 1 then only render the 1st component
})}
<button onClick={ (e) => this.next(e) }>Next</button>
</div>
);
}
}正在发生的事情的关键在于克隆，也是当你按下下一步的时候。我将id添加到您的步骤中，作为交叉引用每个步骤的一种方式，然后您可以通过id查找当前步骤，并将completed设置为true。这是一个相当基本的例子，所以请耐心听我说。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50751148
复制相关文章
相似问题
腾讯云开发者
