短路在反应渲染中不起作用 div

Question

我想在变量为真时启动多个组件，我使用如下：

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

但是，当变量为真时，只有组件A起床而组件B.What没有起床，这是错误的吗？

Answer 1

你的花括号设置的有点奇怪。像这样尝试：

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

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

Answer 2

我很惊讶你能得到任何输出。那些条件组件一旦你弄清楚了逻辑，就需要有一个父级——要么有一个片段，要么有一个 div，或者什么的。

您会看到类似此错误的内容：

SyntaxError: Inline Babel script: Adjacent JSX elements must be wrapped in an enclosing tag

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>

短路在反应渲染中不起作用 div

Short circuiting not working in react render div

html

javascript

reactjs

react-native

react-component