javascript - 如何避免渲染中嵌套三元？

Question

这是我的情况:

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

但是，eslint 规则给了我错误:不要嵌套三元表达式。

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

Answer 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>