Javascript 有条件地加载组件时减少代码冗余

我试图在类似父级的组件中加载不同的React组件

我想实现的是，当我按下“下一步”按钮

，

必须在

内加载，而“下一步”按钮应改为“上一步”，但单击“上一步”必须加载

我不想使用

。如您所见，我在这里编写了大量冗余代码。是否有办法只需单击按钮即可更改

内的组件

var Block1 = React.createClass({
  render: function(){
    return(
      <div className="block">
        <Component1/>
        <Button1/>
      </div>
    )
  }
});

var Component1 = React.createClass({
  render: function(){
    return(
      <p className = "component1">This is Component1</p>
    )
  }
});

var Button1 = React.createClass({
  next: function(){
    ReactDOM.render(<Block2/>, document.getElementById("container"));
  },

  render: function(){
    return(
      <button className = "button1" onClick = {this.next}>Next</button>
    )
  }
});

var Block2 = React.createClass({
  render: function(){
    return(
      <div className="block">
      <Component2/>
      <Button2/>
      </div>
    )
  }
});

var Component2 = React.createClass({
  render: function(){
    return(
      <p className = "component2">This is Component2</p>
    )
  }
});

var Button2 = React.createClass({
  previous: function(){
    ReactDOM.render(<Block1/>, document.getElementById("container"));
  },

  render: function(){
    return(
      <button className = "button1"  onClick = {this.previous}>previous</button>
    )
  }
});

ReactDOM.render(<Block1/>, document.getElementById("container"));

var Block1=React.createClass({
render:function（）{
返回(
)
}
});
var Component1=React.createClass({
render:function（）{
返回(
这是component1
)
}
});
var Button1=React.createClass({
下一步：函数（）{
render（，document.getElementById（“容器”）；
},
render:function（）{
返回(
下一个
)
}
});
var Block2=React.createClass({
render:function（）{
返回(
)
}
});
var Component2=React.createClass({
render:function（）{
返回(
这是component2
)
}
});
var Button2=React.createClass({
上一个：函数（）{
render（，document.getElementById（“容器”）；
},
render:function（）{
返回(
以前的
)
}
});
render（，document.getElementById（“容器”）；

是否有办法只需单击按钮即可更改

内的组件

var Block1 = React.createClass({
  render: function(){
    return(
      <div className="block">
        <Component1/>
        <Button1/>
      </div>
    )
  }
});

var Component1 = React.createClass({
  render: function(){
    return(
      <p className = "component1">This is Component1</p>
    )
  }
});

var Button1 = React.createClass({
  next: function(){
    ReactDOM.render(<Block2/>, document.getElementById("container"));
  },

  render: function(){
    return(
      <button className = "button1" onClick = {this.next}>Next</button>
    )
  }
});

var Block2 = React.createClass({
  render: function(){
    return(
      <div className="block">
      <Component2/>
      <Button2/>
      </div>
    )
  }
});

var Component2 = React.createClass({
  render: function(){
    return(
      <p className = "component2">This is Component2</p>
    )
  }
});

var Button2 = React.createClass({
  previous: function(){
    ReactDOM.render(<Block1/>, document.getElementById("container"));
  },

  render: function(){
    return(
      <button className = "button1"  onClick = {this.previous}>previous</button>
    )
  }
});

ReactDOM.render(<Block1/>, document.getElementById("container"));

对

实现这一点的一种方法是让主要的顶级组件

，或者我们称之为

，成为一个有状态的组件，它维护状态并驱动确定渲染内容的逻辑。其他组件可能只是无状态表示组件，根据

设置的状态标志进行呈现

本质上，

有一个状态标志，比如说

isShowingNext

，它用来确定渲染哪个部分（“下一个”或“上一个”），该标志由按钮调用的操作设置

就按钮本身而言，它们附加了onClick监听器，每当单击时，都会调用

中的操作，

更新状态标志并重新呈现适当的组件

由于按钮几乎相同，我们可以将它们组合成一个按钮组件，例如

，该组件将根据传递的标志有条件地呈现（“上一个”或“下一个”）（请参见第一种方法）

根据您的用例，如果按钮（及其呈现逻辑）不太相似，您可以有两个按钮，例如

和

，其中一个按钮由

根据状态标志呈现（请参见第二种方法）

第一种方法

var MainBlock=React.createClass({
//最初，我们显示的是“上一页”
getInitialState（）{
返回{
isShowingNext:错误
};
},
//更新状态标志以确定渲染内容的操作
handleUpdateIsShowingNext:函数（isShowingNext）{
这是我的国家({
isShowingNext:isShowingNext
});
},
//基于状态标志显示适当模板的渲染函数
render:function（）{
var isShowingNext=this.state.isShowingNext；
返回(
{isShowingNext？：}
);
}
});
//用于在“上一页”或“下一页”之间切换的按钮取决于逻辑
var ToggleButton=React.createClass({
切换：函数（）{
this.props.onUpdate isShowingNext（！this.props.isShowingNext）；//切换“isShowingNext”标志
},
render:function（）{
var isShowingNext=this.props.isShowingNext；
如果（isShowingNext）{
返回上一个；
}否则{
下一步返回；
}
}
});
//“上一页”的代表性组件
var ComponentPrev=React.createClass({
render:function（）{
return
这是ComponentPrev
；
}
});
//“下一页”的代表性组件
var ComponentNext=React.createClass({
render:function（）{
return
这是component next
；
}
});
render（，document.getElementById（“容器”）；

第二种方法

var MainBlock=React.createClass({
//最初，我们显示的是“上一页”
getInitialState（）{
返回{
isShowingNext:错误
};
},
//返回“上一页”的模板
getTemplateForPrev:function（）{
返回(
);
},
//返回“下一页”的模板
getTemplateForNext:函数（）{
返回(
);
},
//更新状态标志以确定渲染内容的操作
handleUpdateIsShowingNext:函数（isShowingNext）{
这是我的国家({
isShowingNext:isShowingNext
});
},
//基于状态标志显示适当模板的渲染函数
render:function（）{
返回this.state.isShowingNext？this.getTemplateForNext（）：this.getTemplateForPrev（）；
}
});
//“上一页”的代表性组件
var ComponentPrev=React.createClass({
render:function（）{
return
这是ComponentPrev
；
}
});
//“上一页”的按钮
var ButtonPrev=React.createClass({
下一步：函数（）{
this.props.onUpdateIsShowingNext（true）；//单击“previous”使isShowingNext为true
},
render:function（）{
下一步返回；
}
});
//“下一页”的代表性组件
var ComponentNext=React.createClass({
render:function（）{
return
var MainBlock = React.createClass({

  // initially we are showing the "previous" page
  getInitialState() {
    return {
      isShowingNext: false
    };
  },

  // returns the template for the "previous" page
  getTemplateForPrev: function() {
    return (
      <div className="block">
        <ComponentPrev/>
        <ButtonPrev onUpdateIsShowingNext={this.handleUpdateIsShowingNext}/>
      </div>
    );
  },

  // returns the template for the "next" page
  getTemplateForNext: function() {
    return (
      <div className="block">
        <ComponentNext/>
        <ButtonNext onUpdateIsShowingNext={this.handleUpdateIsShowingNext}/>
      </div>
    );
  },

  // action that updates the state flag to determine what gets rendered
  handleUpdateIsShowingNext: function(isShowingNext) {
    this.setState({
      isShowingNext: isShowingNext
    });
  },

  // render function that displays the proper template based on the state flag
  render: function(){
    return this.state.isShowingNext ? this.getTemplateForNext() : this.getTemplateForPrev();
  }
});

// representational component for the "previous" page
var ComponentPrev = React.createClass({
  render: function(){
    return <p className = "component-prev">This is ComponentPrev</p>;
  }
});

// button for the "previous" page
var ButtonPrev = React.createClass({
  next: function(){
    this.props.onUpdateIsShowingNext(true); // clicking "previous" makes isShowingNext be true
  },

  render: function(){
    return <button className="button-prev" onClick={this.next}>Next</button>;
  }
});

// representational component for the "next" page
var ComponentNext = React.createClass({
  render: function(){
    return <p className = "component-next">This is ComponentNext</p>;
  }
});

// button for the "next" page
var ButtonNext = React.createClass({
  previous: function(){
    this.props.onUpdateIsShowingNext(false); // clicking "previous" makes isShowingNext be false
  },

  render: function(){
    return <button className="button-next"  onClick={this.previous}>previous</button>;
  }
});

ReactDOM.render(<MainBlock/>, document.getElementById("container"));

var Block = React.createClass({
  getInitialState: function(){
    return {
      step: 1
    }
  },
  goto: function(step){
    this.setState({
      step: step || 1 // default to step 1
    })
  },
  render: function(){
    var renderStep =  <div className="block component1">
        <Component1/>
        <Button onClick={this.goto.bind(this,2)}>Next</Button>
      </div>

    if (this.state.step === 2) {
      renderStep =  <div className="block component2">
        <Component2/>
        <Button onClick={this.goto.bind(this,1)}>Previous</Button>
      </div>
    }

    return renderStep
  }
});