内联条件内条件语句的第二层反应

Question

我正在尝试检查触发器状态，如果它是新的，那之后，我需要检查另一种情况，并根据它需要显示tagone或tagtwo。

我一直试图为此找到内联文档。

<modalscrolling  onClose={this.props.toggleModal} open={openModal} 
 trigger={isNew ? 
<sometag /> : 
<TagOne  />}>
<TagTwp />}
>

我正在尝试的另一种方法是将其发送到其他函数。任何建议来处理这个:)

Answer 1

您可以执行以下操作：

<modalscrolling  onClose={this.props.toggleModal} open={openModal} 
 trigger={isNew ? <SomeTag /> : secondLevelCondition ? <TagOne  /> :<TagTwp /> }
/>

Answer 2

三元运算符是更好的选择，因为它有助于理解组件标记。如果条件部分很大，请将其转换为单独的功能组件。

Answer 3

trigger= { isNew ? <sometag/> : { anothercond ? <TagOne /> : <TagTwo/> }}。

这是您要寻找的吗？

Answer 4

您可以具有如下嵌套的三元运算符，

App.js

import React from "react";
import "./styles.css";
export default function App() {
  var isNew = true;
  var tag = 1;
  return (
    <div className="App">
      {isNew ? (
        tag === 1 ? (
          <span>tag1</span>
        ) : (
          <span>tag2</span>
        )
      ) : (
        <span>notnew</span>
      )}
    </div>
  );
}

演示：https://codesandbox.io/s/ecstatic-shape-r64i8

但是我建议将三元运算中的内容提取到另一个以“标签”为输入的功能组件。它有助于轻松扩展代码并使其更具可读性。

App.js重构后还有另一个

import React from "react";
import "./styles.css";

const AnotherCompoent = ({ tag }) => {
  return tag === 1 ? <span>tag1</span> : <span>tag2</span>;
};

export default function App() {
  var isNew = true;
  var tag = 1;
  return (
    <div className="App">
      {isNew ? <AnotherCompoent tag={tag} /> : <span>notnew</span>}
    </div>
  );
}

演示：https://codesandbox.io/s/affectionate-hertz-1ou77