如何避免渲染中的嵌套三元？答案

【问题标题】：How to avoid nested ternary in render?如何避免渲染中的嵌套三元？
【发布时间】：2020-03-04 15:21:27
【问题描述】：

这是我的情况：

<Form onSubmit={submit}>
                    {something === 0 ?
                        (someData.length && someData.length > 0) ?
                            doSomething() : null :
                        (someOtherData.length && someOtherData.length > 0) ?
                            doSomethingElse() : null
                    }
</Form>

但是，eslint 规则给了我错误：Do not nest ternary expressions。

如何避免这种情况？ if - else 可以写成return (...) 渲染数据吗？

【问题讨论】：

if-else-statement-inside-jsx-reactjs 或 how-to-do-a-nested-if-else-statement-in-reactjs-jsx 的副本
如果你的逻辑变得越来越复杂，你总是可以把它移到渲染之外的一个函数中，然后在渲染中调用这个函数

标签： javascript node.js reactjs if-statement

【解决方案1】：

你能在渲染方法返回之前做验证吗

render () {
  myComponent = <></>;

  if (something === 0) {
      if (someData.length && someData.length > 0) {
        myComponent = doSomething();
      }
  } else if (someOtherData.length && someOtherData.length > 0) {
      myComponent = doSomethingElse();
  }

  return (
    <Form onSubmit={submit}>
      {<myComponent/>}
    </Form>
  )
}

如果你想在组件中进行验证，你可以这样尝试

<Form onSubmit={submit}>
    {
      something === 0 && someData.length && someData.length > 0
        ? doSomething()
        : something !== 0 && someOtherData.length && someOtherData.length > 0 && doSomethingElse()
    }
</Form>

【讨论】：

@storagemode11 试试看{ something === 0 && someData.length && someData.length > 0 ? doSomething() : something !== 0 && someOtherData.length && someOtherData.length > 0 && doSomethingElse() }

【解决方案2】：

将行为封装到组件上的函数中

renderComponent() {
  return something ?
    someOtherData.length && doSomethingElse() :
    someData.length && doSomething();
}

render() {
  ...
  return (
    <Form onSubmit={submit}>
      {renderComponent()}
    </Form>
  );
}

提示 - 你不需要显式传递 null，React 支持 conditional rendering

【讨论】：