短路在react渲染分区中不起作用

Question

当一个变量为true时，我想启动多个组件，我使用如下：

return (
<div className="report">
{conditionalVariable &&
<ComponentA/> &&
<ComponentB/>
}
</div>
)

然而，当变量为true时，只有分量A在上升，而没有分量B在上升。这有什么错？

Answer 1

我很惊讶你得到了任何输出。这些条件组件一旦你计算出逻辑，就需要有一个父组件——要么有一个片段，要么有一个子div，或者其他什么。

你可能会看到类似于这个错误的东西：

SyntaxError：内联Babel脚本：相邻的JSX元素必须封装在一个封闭标签中

const { Fragment, useState } = React;
function Example() {
const [ conditional, setConditional ] = useState(false);
function handleClick() {
setConditional(!conditional);
}
return (
<div>
{conditional && (
<Fragment>
<Test text="Bob" />
<Test text="Sue" />
</Fragment>
)}
<button onClick={handleClick}>
Click me
</button>
</div>
);
}
function Test({ text }) {
return <p>{text}</p>;
}
ReactDOM.render(
<Example />,
document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 2

你的大括号设置得很奇怪。这样试试：

return (
<div className="report">
{conditionalVariable &&
<>
<ComponentA />
<ComponentB />
</>
}
</div>
)

此解决方案使用React.Fragment的简短语法将要在相同条件下显示的两个组件分组。