有条件地渲染反应片段内的多个元素

Question

我有一个函数，它需要一些布尔值，并且应该为每个布尔值渲染一个 html 元素（如果它是真的）。这就是我想做的：

function renderThis (first, second, third) {
  if (!(first || second || third)) {
    return <span>each input is false</span>
  }
  return (
  //README: This part below doesn't work. How can I conditionally render these span tags below?
    <React.Fragment>
      {
        first
          ? <span>First is true</span>
          : null
        second
          ? <span>Second is true</span>
          : null
        third
          ? <span>Third is true</span>
          : null
        credit
      }
    </React.Fragment>
  )
}

该片段现在不起作用。我可以有条件地渲染一个元素（例如，first如果删除后续的second和third变量及其关联代码，我可以渲染），但不能渲染全部三个元素。如何在这里有条件地渲染所有三个变量？

Answer 1

将返回的元素转换为array. 无法返回相邻的 jsx

 <React.Fragment>
      {
        [
           true ? <span key='1'>First is true</span>: null,
           true ? <span key='2'>Second is true</span>: null,
           false ? <span key='3'>Third is true</span>: null
        ]

      }
    </React.Fragment>

如果您只返回不需要的数组Fragment

return [
   true ? <span>First is true</span>: null,
   true ? <span>Second is true</span>: null,
   false ? <span>Third is true</span>: null
]

此外，您不能jsx从同一语句返回相邻的语句，但可以返回相邻的一元语句

return(
    <>
        {true ? <span /> : null} 
        {false ? <span /> : null}
    </>
)