如何使用反應渲染帶有條件的jsx？

Question

我想使用 react 根據條件渲染 jsx。

我想做什么？

如果 items.length <= 0 和 shared_items.length <= 0 我想顯示一些內容。

如果 items.length > 0 或 shared_items.length > 0 我想顯示其他內容。

下面是我的代碼，

function Parent() {
    return(
        {items.length <= 0 && shared_items.length <= 0 && 
            <div>
                <span> first</span>
            </div>
        }
        {items.length > 0 or shared_items.length > 0 && //unreachable code here
            <div>
                <Button> click</Button>
                <span> second </span>
            </div>
        }
    );
}

第二個條件碼不可達。 不知道如何根據條件渲染 jsx。

有人可以幫我解決這個問題。 謝謝。

Answer 1

or 運算符是錯誤的。

function Parent() {
    return(
        {items.length <= 0 && shared_items.length <= 0 && 
            <div>
                <span> first</span>
            </div>
        }
        {(items.length > 0 || shared_items.length > 0) && //unreachable code here
            <div>
                <Button> click</Button>
                <span> second </span>
            </div>
        }
    );
}

為了簡化代碼，您還可以將條件分配給 boolean 變量

function Parent() {
    const conditionA = items.length <= 0 && shared_items.length <= 0  ? true : false;
    const conditionB = items.length > 0 || shared_items.length > 0 ? true: false;
    return(
        {conditionA && 
            <div>
                <span> first</span>
            </div>
        }
        {conditionB && //unreachable code here
            <div>
                <Button> click</Button>
                <span> second </span>
            </div>
        }
    );
}

Answer 2

您還可以在react中創建此組件以進行條件渲染。

export default function App() {
  const items = [1, 2, 3, 4, 5];
  const shared_items = [3, 4, 5];

  const RenderFunc = () => {
    if (items.length <= 0 && shared_items.length <= 0) {
      return (
        <div>
          <span> first</span>
        </div>
      );
    }
    if (items.length > 0 || shared_items.length > 0) {
      return (
        <div>
          <button> click</button>
          <span> second </span>
        </div>
      );
    }
  };

  return (
    <div>
      <RenderFunc />
    </div>
  );
}