React中如何通过布尔Prop控制组件状态实现三元渲染？

原代码的核心问题 #

1. NoPhotos组件无返回内容：你的封装组件没有return任何JSX，等于没渲染任何东西，而且页面中的使用语法完全错误（把组件和三元运算符混写）。
2. useEffect逻辑无效且引发循环：原组件里的useEffect既没用到传入的props.wait，还因为依赖了waiting，执行setWaiting(true/false)会反复触发useEffect，造成无限循环。
3. 冗余的内部状态：既然已经通过props传入wait控制显示，完全没必要在组件内部额外维护waiting状态（除非有异步逻辑需要后续修改状态）。

正确的组件封装方式 #

方式1：直接基于props控制渲染（推荐，最简洁）

让组件接收wait属性和要显示的页面内容（children），根据wait的值直接切换显示内容：

import React from "react";

const NoPhotos = ({ wait, children }) => {
  // 根据传入的wait属性决定显示内容
  if (wait) {
    return <div>Coming Soon</div>; // 替换成你的"Coming Soon"页面结构
  }
  // 否则渲染传入的页面内容
  return <>{children}</>;
};

export default NoPhotos;

页面中使用组件

return (
  <NoPhotos wait={true}>
    {/* 这里放原本的网页内容 */}
    <div>你的页面内容</div>
  </NoPhotos>
);

方式2：需要内部状态时的写法（比如后续有异步更新需求）

如果需要在组件内部修改状态，但仍要同步外部传入的wait，可以这样写：

import { useState, useEffect } from "react";

const NoPhotos = ({ wait, children }) => {
  // 初始状态同步传入的wait
  const [waiting, setWaiting] = useState(wait);

  // 当外部wait变化时，同步更新内部状态
  useEffect(() => {
    setWaiting(wait);
  }, [wait]); // 只依赖外部传入的wait，避免循环

  if (waiting) {
    return <div>Coming Soon</div>;
  }
  return <>{children}</>;
};

export default NoPhotos;

补充说明 #

原页面中的初始代码里，useEffect没有依赖数组，会在组件每次渲染时执行setWaiting(true)，导致页面一加载就显示“Coming Soon”。如果这是你的需求，用上面封装的组件后，只需在调用时传入wait={true}即可；如果需要动态切换，只需修改传入wait的布尔值就行。

内容的提问来源于stack exchange，提问作者OhItsPM