將道具傳遞到同一組件的所有實例

Question

在我的React應用程序中，我通過將一個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>
  );
}

如您所見，我必須分別將changeView方法傳遞給View組件的每個實例。 有什么方法可以設置View組件，以便每個實例都可以通過changeView傳遞，而不必每次都顯式聲明它嗎？

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

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

Answer 3

您只需要在視圖中更改文本即可。 將文本移動到組件外部的數組，然后通過視圖索引選擇文本，或回退到錯誤：

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

Answer 4

您可以創建一個函數來為您執行此操作，

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