Javascript 将道具传递给同一组件的所有实例

在我的React应用程序中，我通过将a

changeView

方法作为道具从父级传递到菜单，根据在菜单组件中单击的按钮有条件地呈现视图。当前视图作为状态存储在父零部件中

我还想使用相同的

changeView

方法来控制每个条件渲染视图中的按钮，以便在单击时返回菜单

我目前正在实现这一目标，因此：

render() {
  let view;
  switch(this.state.view) {
    case 0:
      view = (<Menu changeView={this.changeView} />);
      break;
    case 1:
      view = (<View changeView={this.changeView}>Test 1</View>);
      break;
    case 2:
      view = (<View changeView={this.changeView}>Test 2</View>);
      break;
    default:
      view = (<View changeView={this.changeView}>An error has ocurred!</View>);
  }

  return (
    <div>
      {view}
    </div>
  );
}

render（）{
让我们看看；
开关（this.state.view）{
案例0：
视图=（）；
打破
案例1：
视图=（测试1）；
打破
案例2：
视图=（测试2）；
打破
违约：
视图=（出现错误！）；
}
返回(
{view}
);
}

---

如您所见，我必须将

changeView

方法分别传递给

View

组件的每个实例。有没有办法设置

视图

组件，使每个实例都被传递

更改视图

属性，而不必每次都显式声明它？

尝试在视图组件内移动switch语句

render() {
  return (
    <div>
      {this.state.view === 0 && <Menu changeView={this.changeView} />}
      {this.state.view > 0 && <View changeView={this.changeView}>
      {() => {
        switch (this.state.view) {
          case 1:
            return 'Test 1';
          case 2:
            return 'Test 2';
          default:
            return 'An error has ocurred!';
        }
      }}
      </View>
    </div>
  );
}

render（）{
返回(
{this.state.view==0&&}
{this.state.view>0&&
{() => {
开关（this.state.view）{
案例1：
返回“测试1”；
案例2：
返回“测试2”；
违约：
返回“出现错误！”；
}
}}
);
}

尝试将switch语句移动到视图组件中

render() {
  return (
    <div>
      {this.state.view === 0 && <Menu changeView={this.changeView} />}
      {this.state.view > 0 && <View changeView={this.changeView}>
      {() => {
        switch (this.state.view) {
          case 1:
            return 'Test 1';
          case 2:
            return 'Test 2';
          default:
            return 'An error has ocurred!';
        }
      }}
      </View>
    </div>
  );
}

render（）{
返回(
{this.state.view==0&&}
{this.state.view>0&&
{() => {
开关（this.state.view）{
案例1：
返回“测试1”；
案例2：
返回“测试2”；
违约：
返回“出现错误！”；
}
}}
);
}

如果需要，您可以将开关更改为仅更改副本和组件

render() {
  let copy = "";
  let Component = View;

  switch (this.state.view) {
    case 0:
      Component = Menu;
      break;
    case 1:
      copy = "Test 1";
      break;
    case 2:
      copy = "Test 2";
      break;
    default:
      copy = "An error has ocurred!";
  }

  return (
    <div>
      <Component changeView={this.changeView}>{copy}</Component>
    </div>
  );
}

render（）{
让我们复制=”；
让组件=视图；
开关（this.state.view）{
案例0：
组件=菜单；
打破
案例1：
copy=“测试1”；
打破
案例2：
copy=“测试2”；
打破
违约：
copy=“出现错误！”；
}
返回(
{copy}
);
}

如果需要，您可以将开关更改为仅更改副本和组件

render() {
  let copy = "";
  let Component = View;

  switch (this.state.view) {
    case 0:
      Component = Menu;
      break;
    case 1:
      copy = "Test 1";
      break;
    case 2:
      copy = "Test 2";
      break;
    default:
      copy = "An error has ocurred!";
  }

  return (
    <div>
      <Component changeView={this.changeView}>{copy}</Component>
    </div>
  );
}

render（）{
让我们复制=”；
让组件=视图；
开关（this.state.view）{
案例0：
组件=菜单；
打破
案例1：
copy=“测试1”；
打破
案例2：
copy=“测试2”；
打破
违约：
copy=“出现错误！”；
}
返回(
{copy}
);
}

您所需要的只是视图中不断变化的文本。将文本移动到组件外部的数组中，然后按视图索引选择文本或返回到错误：

const text = ['', 'Test 1', 'Test 2'];

class Demo extends React.Component {
  state = {
    view: 1
  }

  render() {  
    const { view } = this.state;
    const text = text[view] || 'An error has ocurred!';

    return (
      <div>
        {view === 0 ?
          <Menu changeView={this.changeView} />
          :
          <View changeView={this.changeView}>{text}</View>
        }             
      </div>
    );
  }
}

const text=[''，'测试1'，'测试2']；
类Demo扩展了React.Component{
状态={
视图：1
}
render（）{
const{view}=this.state；
const text=text[view]| |“出现错误！”；
返回(
{view==0？
:
{text}
}             
);
}
}

您所需要的只是视图中不断变化的文本。将文本移动到组件外部的数组中，然后按视图索引选择文本或返回到错误：

const text = ['', 'Test 1', 'Test 2'];

class Demo extends React.Component {
  state = {
    view: 1
  }

  render() {  
    const { view } = this.state;
    const text = text[view] || 'An error has ocurred!';

    return (
      <div>
        {view === 0 ?
          <Menu changeView={this.changeView} />
          :
          <View changeView={this.changeView}>{text}</View>
        }             
      </div>
    );
  }
}

const text=[''，'测试1'，'测试2']；
类Demo扩展了React.Component{
状态={
视图：1
}
render（）{
const{view}=this.state；
const text=text[view]| |“出现错误！”；
返回(
{view==0？
:
{text}
}             
);
}
}

您可以创建一个函数来为您执行此操作

getView(Component, children){
    return <Component changeView = {this.changeView}>{children}</Component>
}

render() {
  let view;
  switch(this.state.view) {
    case 0:
      view = getView(Menu)
      break;
    case 1:
      view = getView(View,'Test 1')
      break;
    case 2:
      view = getView(View,'Test 2')
      break;
    default:
      view = getView(View,'An error has ocurred!');
  }

  return (
    <div>
      {view}
    </div>
  );
}

getView（组件、子组件）{
返回{children}
}
render（）{
让我们看看；
开关（this.state.view）{
案例0：
视图=获取视图（菜单）
打破
案例1：
view=getView（视图，“测试1”）
打破
案例2：
视图=获取视图（视图，“测试2”）
打破
违约：
view=getView（视图，“出现错误！”）；
}
返回(
{view}
);
}

您可以创建一个函数来为您执行此操作

getView(Component, children){
    return <Component changeView = {this.changeView}>{children}</Component>
}

render() {
  let view;
  switch(this.state.view) {
    case 0:
      view = getView(Menu)
      break;
    case 1:
      view = getView(View,'Test 1')
      break;
    case 2:
      view = getView(View,'Test 2')
      break;
    default:
      view = getView(View,'An error has ocurred!');
  }

  return (
    <div>
      {view}
    </div>
  );
}

getView（组件、子组件）{
返回{children}
}
render（）{
让我们看看；
开关（this.state.view）{
案例0：
视图=获取视图（菜单）
打破
案例1：
view=getView（视图，“测试1”）
打破
案例2：
视图=获取视图（视图，“测试2”）
打破
违约：
view=getView（视图，“出现错误！”）；
}
返回(
{view}
);
}

对于案例0组件是

菜单

非

查看

@dotconnor谢谢你的帮助。我认为Thole的答案更优雅。对于案例0组件是

菜单

非

查看

@dotconnor谢谢你的帮助。我认为Thole的答案更优雅。这很完美。谢谢！这很完美。谢谢！