Question

我有一个<div>的多个<input>和一个onClick事件来打开一个模态窗口，它必须渲染某些div输入才能进行更近的缩放，但我正在使用这个模态窗口进行渲染一个小键盘。

有没有办法区分应该呈现哪个组件？是否有可能将某个组件发送到模态组件（子组件）然后呈现此组件？我试过这样的事情 -

<Modal update={this.editValue.bind(this)}>{Numpad}</Modal>

或

<Modal child={Numpad} update={this.editValue.bind(this)}/>

然后在Modal（孩子）

{React.cloneElement(this.props.children, { ...others})}

但它不起作用，抛出无效的元素类型错误。我可以使用开关，在Modal的渲染组件内部来区分使用props.type渲染哪个组件，但是我想要更简单的方法来做任何提示？

Answer 1

据我所知，您尝试在模态窗口中创建选项卡式界面，以便根据当前活动的选项卡显示不同的内容。我可以看到针对该问题的以下解决方案。

首先，我们创建将保存Modal组件及其内容的基本组件：

class App extends React.Component {
  render() {
    return (
      <Modal>
        <div>The content of the first tab</div>
        <div>The content of the second tab</div>
        <div>The content of the third tab</div>
      </Modal>
    );
  }
}

上面的每个子（div）组件代表Modal中每个标签的内容。

现在让我们创建Modal组件：

class Modal extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      tabIndex: 0
    };
  }

  switchTabs(tabIndex) {
    this.setState({
      tabIndex
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.switchTabs.bind(this, 0)}>1</button>
        <button onClick={this.switchTabs.bind(this, 1)}>2</button>
        <button onClick={this.switchTabs.bind(this, 2)}>3</button>
        <div>
          {React.Children.map(this.props.children, (child, index) =>
            index === this.state.tabIndex && child
          )}
        </div>
      </div>
    )
  }
}

我们将活动标签的索引（tabIndex）保留为组件本地状态的一部分。我们还显示了三个用于在这些选项卡之间切换的按钮。

最后，我们使用React.Children.map对子组件进行迭代，并显示index对应当前tabIndex的孩子。

试试下面的代码段。

＆＃13;

class Modal extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      tabIndex: 0
    };
  }
  
  switchTabs(tabIndex) {
    this.setState({
      tabIndex
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.switchTabs.bind(this, 0)}>1</button>
        <button onClick={this.switchTabs.bind(this, 1)}>2</button>
        <button onClick={this.switchTabs.bind(this, 2)}>3</button>
        <div>
          {React.Children.map(this.props.children, (child, index) =>
            index === this.state.tabIndex && child
          )}
        </div>
      </div>
    )
  }
}

class App extends React.Component {
  render() {
    return (
      <Modal>
        <div>
          <img src="https://avatars2.githubusercontent.com/u/4226954?v=3&s=400" height="200" />
        </div>
        <div style={{ height: '200px', width: '200px', marginTop: '5px' }}>The second tab</div>
        <div>
          <img src="https://avatars3.githubusercontent.com/u/810671?v=3&s=400" height="200" />
        </div>
      </Modal>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

＆＃13;

发送给孩子应该呈现哪个组件 - React js

1 个答案: