时间戳

首页 > 解决方案 > React - 我可以在 componentDidMount 中添加组件吗？

reactjs - React - 我可以在 componentDidMount 中添加组件吗？

问题描述

React 抱怨这段代码？为什么？

componentDidMount() {
  <childComponent />;
}

当页面加载时，我只需要显示一次childComponent 。

标签： reactjs

解决方案

正如一些评论所表明的那样，有条件地在componentDidMount. 这就是render函数的用途。这样做的原因是，通常只要应用程序的 URL 被点击，整个 React 应用程序就会被加载到客户端上。

但是，在某些情况下，需要等待资源或数据加载后再渲染：

延迟加载：可以将您的应用程序分成块。然后，这些块可以仅在需要时交付给客户端。在React 文档中阅读有关此内容的更多信息。

下面是一种可能实现的示例（也来自文档）：

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

等待数据：一旦从服务器返回数据，您也可能只想渲染组件（或组件的某些部分）。在这种情况下，您可能决定在 中启动服务器请求componentDidMount，然后在返回数据后有条件地渲染某些内容。

下面是使用钩子的一种可能实现的示例（16.8 版本除外）：

const DataHandlerComponent = () => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [submitting, setSubmitting] = useState(true);

  // equivalent to componentDidMount
  useEffect(() => {
    axios.get('some url')
      .then(({ data }) => {
        setData(data);
        setSubmitting(false);
      })
      .catch((err) => {
        setError(err);
        setSubmitting(false)
      });
  }, []);

  // equivalent to render
  return (
    <div>
      {submitting &&
        <YourCustomProgress />
      }
      {!submitting && data &&
        <YourCustomComponent data={data} />
      }
      {!submitting && !data &&
        <YourCustomErrorComponent error={error} />
      }
    </div>
  );
};

希望这些选项之一能满足您的需求。如果您不需要这两种方法之一，您可能只需在正常渲染周期中渲染您的组件。

推荐阅读