Reactjs 使用React将未定义的组件作为子组件传递

我认为代码比文字更能解释它。这就是我要做的：

import { useEffect, useState } from "react";
import "./styles.css";

const IAmHiComponent = ({ children }) => <div>{children}</div>;

const COMPONENTS = {
  hi: IAmHiComponent
};

const Boom = ({ isLoaded, children }) => {
  if (!isLoaded) {
    return "Loading...";
  }

  return <div style={{ background: "red" }}>{children}</div>;
};

export default function App() {
  const [loadedComponent, setLoadedComponent] = useState(null);
  useEffect(() => {
    setTimeout(() => {
      setLoadedComponent("hi");
    }, 5000);
  }, []);

  const MyLoadedComponent = COMPONENTS[loadedComponent];

  return (
    <Boom isLoaded={!!loadedComponent}>
      <MyLoadedComponent>Hi!!!</MyLoadedComponent>
    </Boom>
  );
}

---

所以我试图理解我是不是做错了什么？或者只是缺少一些小的内容？

您试图访问

组件上的
null
，当
loadedComponent
最初为null时，该组件将提供
未定义的

当
loadedComponent
不为空时，您可以添加一个复选框以仅渲染组件，如下所示：

export default function App() {
  const [loadedComponent, setLoadedComponent] = useState(null);
  useEffect(() => {
    setTimeout(() => {
      setLoadedComponent("hi");
    }, 5000);
  }, []);

  const MyLoadedComponent = COMPONENTS[loadedComponent];

  return (
    <Boom isLoaded={!!loadedComponent}>
      {loadedComponent ? <MyLoadedComponent>Hi!!!</MyLoadedComponent> : null }
    </Boom>
  );
}

导出默认函数App（）{
常量[loadedComponent，setLoadedComponent]=useState（null）；
useffect（（）=>{
设置超时（（）=>{
设置加载组件（“hi”）；
}, 5000);
}, []);
const MyLoadedComponent=组件[loadedComponent]；
返回(
{loadedComponent？嗨！！！：null}
);
}
看起来您可以有条件地包含子组件：

导出默认函数App（）{
常量[loadedComponent，setLoadedComponent]=useState（null）；
useffect（（）=>{
设置超时（（）=>{
设置加载组件（“hi”）；
}, 5000);
}, []);
const MyLoadedComponent=组件[loadedComponent]；
返回(
{loadedComponent？嗨！！！：null}
);
}
正如我所说，我的示例是我试图实现的目标的简化版本。我知道我可以做这个检查，但是没有必要将“isLoading”传递给“Boom”组件，因为我会对“loadedComponent”条件检查做同样的事情。这是我从一开始就提出的问题，当我在父级中进行条件检查时，我是否可以作为子级传递undefined。因为我知道我可以在作为一个孩子传递之前检查它，但是没有必要传递这个加载到Boom组件的信息。然后当React给你这个错误时，你已经得到了答案。你不能<代码>未定义
不是有效值，表示没有值<另一方面，code>null
是一个有效值。虽然两者都是空的，但都有不同的含义。嗯，不是真的。：）我仍然不明白为什么react对这个未定义的东西不满意，即使它在被定义之前并没有被实际使用。我是说，在Boom组件中检查loadedComponent与在App组件中检查loadedComponent有什么区别？您可以使用
React.createElement
查看JSX是如何翻译的。这应该会让您更好地理解。检查
createElement
现在有意义了：）感谢您指出了正确的方向。
export default function App() {
  const [loadedComponent, setLoadedComponent] = useState(null);
  useEffect(() => {
    setTimeout(() => {
      setLoadedComponent("hi");
    }, 5000);
  }, []);

  const MyLoadedComponent = COMPONENTS[loadedComponent];

  return (
    <Boom isLoaded={!!loadedComponent}>
      {loadedComponent ? <MyLoadedComponent>Hi!!!</MyLoadedComponent> : null }
    </Boom>
  );
}