React - 如何在渲染函数中返回多个组件中的一个？

Question

在我的状态中，我有showTab1、showTab2和showTab3。如果选择了i标签页，则其他标签页将设置为false。因此，在我的render函数中，我希望能够返回类似以下的内容：

  return (
    <div>
      {
        (() => {
          if (someCondition) {
            if (this.state.showTab1) {
              return (
                <div>
                  <Tab1/>
                </div>
              )
            } else if (this.state.showTab2) {
              return (
                <div>
                  <Tab2/>
                </div>
              )
            } else if (this.state.showTab3) {
              return (
                <div>
                  <Tab3/>
                </div>
              )
            }
          }

          return <span />;
        })()
      }

      <AnotherComponent>
    </div>
  );

但是我知道，一个函数不允许有多个返回值，或者至少被认为是一种不好的编程实践。我该如何解决这个问题呢？

- TheRealFakeNews

---

“这被认为是不良实践” - 我从未听说过这个。在渲染函数中至少有两个返回是相当普遍的做法：if (!data) return null; return (<div>...</div>); - GG.

Answer 1

理想情况下，您可以使用一个变量来确定您需要哪个选项卡，然后您可以使用switch语句而不是多个if语句。像这样的东西会很好：

render() {
    const { currentTabId } = this.props;
    let CurrentTab;
    switch( currentTabId ) {
        case 'tab1':
            CurrentTab = Tab1;
            break;
        case 'tab2':
            CurrentTab = Tab2;
            break;
        case 'tab3':
            CurrentTab = Tab3;
            break;
        default:
            CurrentTab = null;
    };
    return <div>{ CurrentTab && <CurrentTab /> }</div>;
}

或者

render() {
    const { currentTabId } = this.props;
    const tabs = {
        tab1: Tab1,
        tab2: Tab2,
        tab3: Tab3,
    };
    const CurrentTab = tabs[ currentTabId ] || null;
    return <div>{ CurrentTab && <CurrentTab /> }</div>;
}

- DiverseAndRemote.com

Answer 2

你的选项卡有什么共同点，又有什么不同之处？

基于这个想法，创建一个单一的Tab组件，根据需要的属性（差异）进行渲染。但是...为什么呢？

React非常棒，因为它可以知道表示所设置的状态所需的最小更改量，使您能够将整个UI处理为基于状态的系统。 React的良好性能基于它如何很好地识别这些差异。

如果您的render方法每次返回完全不同的组件，则React会删除其中一个并附加另一个，因为它无法区分它们之间的区别。但是，如果您在组件中使用属性和状态指定更改和不更改的内容，那么它将非常出色地完成其工作。 DOM很糟糕，一直以来都是这样，您对其进行的更改越少，页面的表现就越好。

这是否意味着您不能返回三个完全不同的组件？当然不是，但如果您在所有组件上都这样做，那么您将面临非常严重的性能问题。这听起来很像一种不良实践，足以避免它。

以 SO 标签页为一个非常微不足道的例子，假设您从页面的其他位置导航到它们，因此只显示一个活动标签页。

如果您这样做：

<div>
  {() => {
    if (this.state.active === 'jobs')
      return <Jobs>;
    if (this.state.active === 'doc')
      return <Documentation>;
    // ... you get it
  }}
</div>

无论何时你改变了state.active，React都将移除该标签并添加一个新的标签。 但是，如果你不使用不良实践，而是使用像无状态函数组件这样的良好实践。

const Tab = ({text, href, children}) => (
  <div>
    <a href={href}>{text}</a>
    {children}
  </div>
);

// In the parent one
textByTab() {
  switch(this.state.active) {
    case 'jobs':
      return 'Jobs';
    case 'doc':
      return 'Documentation';
  }
}

hrefByTab() { // ... you get it }

childrenByTab() {
  if (this.state.active === 'doc')
    return <span className="beta-thing">Beta</span>;
}

render() {
  return (
    <div>
      <Tab text={this.textByTab()} href={this.hrefByTab()}>
        {this.childrenByTab()}
      </Tab>
    </div>
  );
}

现在React知道哪些内容可以更改，如何更改，甚至可以进行高级的函数操作以获得更好的性能。

- Marco Scabbiolo