if / else 是否與 React 條件渲染中的三元和邏輯 && 運算符做同樣的事情

Question

我有一個 React 組件，如果show為true ，它會顯示另一個組件：

const ChildComponent = ({ show }: Props) => {
  if (show) {
    return <AnotherChild />;
  }
  return null;
};

上面的 if/else 與三元運算符或 && 的作用相同：

三元：

return show ? (
 <AnotherChild />;
) : null

邏輯 && 運算符：

返回（{顯示&&}）；

Answer 1

如果show始終是 boolean，那么是的，這些都是等價的。

如果show是假的但不是null也不是undefined ，可能會有一點問題，因為它會被渲染，例如：

 const App = ({ show }) => { return show && <div>content</div>; }; ReactDOM.createRoot(document.querySelector('.react')).render(<App show={0} />);

 <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <div class='react'></div>

如果 prop 的類型不受約束，最好使用條件運算符或if / else顯式替換null而不是使用&& 。 （不過貌似你用的是TypeScript，所以類型受限，這樣就好了）