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

Question

这是我的情况：

<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 (...)来呈现数据吗？

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>

Answer 2

将行为封装到组件上的 function

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

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

提示 - 你不需要显式传递null ，React 支持条件渲染