Javascript 不嵌套三元表达式-可选

我有一个React组件，它可以有4个状态：advisoryResults、results、noResults、newAccount

我认为使用三元表达式是有意义的，但这是不允许的，有什么好的替代方法

export default class Home extends React.Component {
  state = {
    isAdmin: false
  };

  render() {
    const { isAdmin } = this.state;
    return (
      <div>
        <Header />
        <div css={innerWrap}>
          {isAdmin ? (
            <Button
              onClick={this.handleAddNewContact }
            >
              Add new Contact
            </Button>
          ) : (
            ''
          )}
   {searchMode === searchModes.advisoryPanels ? (
            <>
              <SearchAdvisoryPanels />
              <div css={{ textAlign: 'center', margin: '60px auto' }}>
                <ManAtDesk />
              </div>
            </>
          ) : searchMode === searchModes.noResultsPanel ? (
            <SearchNoResultsPanel />
          ) : searchMode === searchModes.resultsPanel ? (
            accountInfo.map((info, index) => (
              <SearchResultPanel info={info} isAdmin={isAdmin} key={index} />
            ))
          ) : searchMode === searchModes.addContactPanel ? (
            <AddNewContactForm
              onCancelAccount={this.onCancelAccount}
              onSaveAccount={this.onSaveAccount}
            />
          ) : null}
        </div>
      </div>
    );
  }
}

导出默认类Home.Component{
状态={
伊萨明：错
};
render（）{
const{isAdmin}=this.state；
返回(
{isAdmin(
添加新联系人
) : (
''
)}
{searchMode===searchModes.advisoryPanels(
)：searchMode===searchModes.noResultsPanel(
)：searchMode===searchModes.resultsPanel(
accountInfo.map（（信息，索引）=>(
))
)：searchMode===searchModes.addContactPanel(
)：null}
);
}
}

---

请告知。

我正要写回信，这时你用一个switch语句问了这个问题

使用包含所有可能结果的JSON可以解决您的问题，而无需添加不必要的代码：

render() {
    const { isAdmin } = this.state;
    return (
        <div>
            <Header />
            <div css={innerWrap}>
                {isAdmin && <Button onClick={this.handleAddNewContact}> Add new Contact</Button>}
                {
                    {
                        [searchModes.SearchAdvisoryPanels]: (
                            <>
                                <SearchAdvisoryPanels />
                                <div css={{ textAlign: 'center', margin: '60px auto' }}>
                                    <ManAtDesk />
                                </div>
                            </>
                        ),
                        [searchModes.noResultsPanel]: <SearchNoResultsPanel />,
                        [searchModes.resultsPanel]: accountInfo.map((info, index) => (<SearchResultPanel info={info} isAdmin={isAdmin} key={index} />)),
                        [searchModes.addContactPanel]: <AddNewContactForm  onCancelAccount={this.onCancelAccount} onSaveAccount={this.onSaveAccount} />
                    }[searchMode]
                }
            </div>
        </div>
    );
}

或者将结果存储在返回之外，并调用函数（如果存在）：

render() {
    const { isAdmin } = this.state;
    const searchRender = {
        [searchModes.SearchAdvisoryPanels]: () => (
            <>
                <SearchAdvisoryPanels />
                <div css={{ textAlign: 'center', margin: '60px auto' }}>
                    <ManAtDesk />
                </div>
            </>
        ),
        [searchModes.noResultsPanel]: () => <SearchNoResultsPanel />,
        [searchModes.resultsPanel]: () => accountInfo.map((info, index) => (<SearchResultPanel info={info} isAdmin={isAdmin} key={index} />)),
        [searchModes.addContactPanel]: () => <AddNewContactForm onCancelAccount={this.onCancelAccount} onSaveAccount={this.onSaveAccount} />
    }[searchMode]

    return (
        <div>
            <Header />
            <div css={innerWrap}>
                {isAdmin && <Button onClick={this.handleAddNewContact}> Add new Contact</Button>}
                {searchRender && searchRender()}
            </div>
        </div>
    );
}

---

我建议你这样做：

export default class Home extends React.Component {
  state = {
    isAdmin: false
  };

  onCancelAccount = () => {};
  onSaveAcciont = () => {};

  renderSearchResults = (searchMode) => {
    const { info, isAdmin, index } = this.props;

    switch (searchMode) {
      case searchModes.advisoryPanels:
        return this.renderAdvisoryPanels();
      case searchModes.noResultsPanel:
        return <SearchNoResultsPanel />;
      case searchModes.resultsPanel:
        return <SearchResultPanel info={info} isAdmin={isAdmin} key={index} />;
      case searchModes.addContactPanel:
        return (
          <AddNewContactForm
            onCancelAccount={this.onCancelAccount}
            onSaveAccount={this.onSaveAccount}
          />
        );
      default:
        return null;
    }
  }

  renderAdvisoryPanels = () => (
    <React.Fragment>
      <SearchAdvisoryPanels />
      <div css={{ textAlign: 'center', margin: '60px auto' }}>
        <ManAtDesk />
      </div>
    </React.Fragment>
  );

  render() {
    const { isAdmin } = this.state;

    return (
      <div>
        <Header />
        <div css={innerWrap}>
          {isAdmin && (
            <Button onClick={this.handleAddNewContact}>Add new Contact</Button>
          )}
          {this.renderSearchResults(searchMode)}
        </div>
      </div>
    );
  }
}

导出默认类Home.Component{
状态={
伊萨明：错
};
onCancelAccount=（）=>{}；
onSaveAcciont=（）=>{}；
renderSearchResults=（搜索模式）=>{
const{info，isAdmin，index}=this.props；
开关（搜索模式）{
案例搜索模式。咨询面板：
返回此.renderAdvisoryPanels（）；
case searchModes.noResultsPanel：
返回；
案例searchModes.resultsPanel：
返回；
case searchModes.addContactPanel：
返回(
);
违约：
返回null；
}
}
renderAdvisoryPanels=（）=>(
);
render（）{
const{isAdmin}=this.state；
返回(
{isAdmin&&(
添加新联系人
)}
{this.renderSearchResults（搜索模式）}
);
}
}

---

一些处理程序/道具在您的示例中无法立即看到，因此，如果我出错，请修复。

这是您在JS上应该经常做的，将内容移动到fn。这种方法可以保持渲染fn清晰。您的getSearchMode有一个清晰的读数，没有发生任何复杂的事情。您没有设置一个不必要的对象，没有在渲染函数中创建许多函数，也没有做任何魔术——只是简单的旧JS

export default class Home extends React.Component {
  state = {
    isAdmin: false,
  }

  getSearchMode = (searchMode) => {
    if (searchMode === searchModes.advisoryPanels) {
      return (
        <>
          <SearchAdvisoryPanels />
          <div css={{ textAlign: 'center', margin: '60px auto' }}>
            <ManAtDesk />
          </div>
        </>
      )
    }
    if (searchMode === searchModes.noResultsPanel) {
      return <SearchNoResultsPanel />
    }
    if (searchMode === searchModes.resultsPanel) {
      return accountInfo.map((info, index) => (
        <SearchResultPanel info={info} isAdmin={this.state.isAdmin} key={index} /> // you should not use index as key
      ))
    }
    if (searchMode === searchModes.addContactPanel) {
      return (
        <AddNewContactForm
          onCancelAccount={this.onCancelAccount}
          onSaveAccount={this.onSaveAccount}
        />
      )
    }
    return null
  }

  render() {
    const { isAdmin } = this.state
    return (
      <div>
        <Header />
        <div css={innerWrap}>
          {isAdmin ? <Button onClick={this.handleAddNewContact}>Add new Contact</Button> : ''}
          {this.getSearchMode(searchMode)}
        </div>
      </div>
    )
  }
}

导出默认类Home.Component{
状态={
伊萨明：错，
}
getSearchMode=（searchMode）=>{
if（searchMode==searchModes.advisoryPanels）{
返回(
)
}
if（searchMode==searchModes.noResultsPanel）{
返回
}
if（searchMode==searchModes.resultsPanel）{
返回accountInfo.map（（信息，索引）=>(
//您不应该使用索引作为键
))
}
if（searchMode==searchModes.addContactPanel）{
返回(
)
}
返回空
}
render（）{
const{isAdmin}=this.state
返回(
{isAdmin？添加新联系人：“”
{this.getSearchMode（searchMode）}
)
}
}

谢谢你的回答，我试过了，但我得到了以下错误：

未捕获类型错误：（（中间值）（中间值），\u defineProperty（…），\u defineProperty（…），\u defineProperty（…），\u searchModes$SearchAd）[searchMode]不是函数

哦。。

searchMode

是否有一个值与给定的选项都不对应？如果是这样，我需要检查变量existory（我的错）是否发现了问题。非常感谢你的回答，你能给我一个简短的解释它是如何工作的吗？我更新了我的答案，为我上面提到的问题提供了两种可能的解决方案。好吧，很高兴能帮上忙。当然，我会马上解释的非常完美！非常感谢。事实并非如此。您将在此处找到两种方法之间的性能测试：。我的答案在chrome上的效果是原来的4倍，在Firefox上的效果是原来的2倍。哇，我没想到这会成为一个大话题。我个人认为这两种解决方案都很好。唯一的区别可能是代码的编写风格和可读性，它们都是非常主观的主题。然而，FF和Chrome之间的区别似乎令人难以置信。这比公认的答案更具可读性。我想说的是，速度折衷（如果是真的）值得可读性和可维护性。你说的是2倍，4倍的速度，听起来很多，但我们可能在谈论毫秒，所以我更喜欢可读性，而不是轻微的速度增加。我正在重构我的代码，你的答案更具可读性，不确定现在更改被接受的答案是否公平。我投了赞成票，谢谢你的支持。没问题，从我的答案和公认的答案中都可以学到一些东西。

export default class Home extends React.Component {
  state = {
    isAdmin: false
  };

  onCancelAccount = () => {};
  onSaveAcciont = () => {};

  renderSearchResults = (searchMode) => {
    const { info, isAdmin, index } = this.props;

    switch (searchMode) {
      case searchModes.advisoryPanels:
        return this.renderAdvisoryPanels();
      case searchModes.noResultsPanel:
        return <SearchNoResultsPanel />;
      case searchModes.resultsPanel:
        return <SearchResultPanel info={info} isAdmin={isAdmin} key={index} />;
      case searchModes.addContactPanel:
        return (
          <AddNewContactForm
            onCancelAccount={this.onCancelAccount}
            onSaveAccount={this.onSaveAccount}
          />
        );
      default:
        return null;
    }
  }

  renderAdvisoryPanels = () => (
    <React.Fragment>
      <SearchAdvisoryPanels />
      <div css={{ textAlign: 'center', margin: '60px auto' }}>
        <ManAtDesk />
      </div>
    </React.Fragment>
  );

  render() {
    const { isAdmin } = this.state;

    return (
      <div>
        <Header />
        <div css={innerWrap}>
          {isAdmin && (
            <Button onClick={this.handleAddNewContact}>Add new Contact</Button>
          )}
          {this.renderSearchResults(searchMode)}
        </div>
      </div>
    );
  }
}

export default class Home extends React.Component {
  state = {
    isAdmin: false,
  }

  getSearchMode = (searchMode) => {
    if (searchMode === searchModes.advisoryPanels) {
      return (
        <>
          <SearchAdvisoryPanels />
          <div css={{ textAlign: 'center', margin: '60px auto' }}>
            <ManAtDesk />
          </div>
        </>
      )
    }
    if (searchMode === searchModes.noResultsPanel) {
      return <SearchNoResultsPanel />
    }
    if (searchMode === searchModes.resultsPanel) {
      return accountInfo.map((info, index) => (
        <SearchResultPanel info={info} isAdmin={this.state.isAdmin} key={index} /> // you should not use index as key
      ))
    }
    if (searchMode === searchModes.addContactPanel) {
      return (
        <AddNewContactForm
          onCancelAccount={this.onCancelAccount}
          onSaveAccount={this.onSaveAccount}
        />
      )
    }
    return null
  }

  render() {
    const { isAdmin } = this.state
    return (
      <div>
        <Header />
        <div css={innerWrap}>
          {isAdmin ? <Button onClick={this.handleAddNewContact}>Add new Contact</Button> : ''}
          {this.getSearchMode(searchMode)}
        </div>
      </div>
    )
  }
}