将 props 传递给同一组件的所有实例答案

【问题标题】：Pass props to all instances of same component将 props 传递给同一组件的所有实例
【发布时间】：2018-11-09 09:46:26
【问题描述】：

在我的 React 应用程序中，我通过将 changeView 方法作为 props 从父级传递到菜单来有条件地渲染视图，具体取决于在我的菜单组件中单击了哪个按钮。当前视图作为状态存储在父组件中。

我还想使用同样的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>
  );
}

如您所见，我必须将changeView 方法单独传递给View 组件的每个实例。有什么方法可以设置 View 组件，以便每个实例都传递 changeView 属性，而无需我每次都显式声明它？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

尝试在 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>
  );
}

【讨论】：

对于案例 0 组件是 Menu 而不是 View
@dotconnor 感谢您的帮助。我认为 Tholle 的回答更优雅。

【解决方案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>
  );
}

【讨论】：

这是完美的。谢谢！

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：