React问题：如何在return语句中渲染new创建的组件实例？

问题描述 #

在React类组件中尝试通过new关键字创建DayLayout和Settings的实例，然后将这些实例作为组件渲染，但VS Code报错，程序无法运行，React不接受此类实例作为可渲染组件，寻求解决方法。

原代码 #

Maanantai = new DayLayout(d.state.maanantai)
Tiistai = new DayLayout(d.state.tiistai)
Keskiviikko = new DayLayout(d.state.keskiviikko)
Torstai = new DayLayout(d.state.torstai)
Perjantai = new DayLayout(d.state.perjantai)
Lauantai = new DayLayout(d.state.lauantai)
Sunnuntai = new DayLayout(d.state.sunnuntai)
set = new Settings

return (
  <div>
    <div><h3>Otsikko palkki</h3></div>
    {(() => {
      if (set.getWeekstart != "Maanantai") {
        return (
          <Sunnuntai/>
        )
      }
    })()}
    <Maanantai/>
    <Tiistai/>
    <keskiviikko/>
    <Torstai/>
    <Perjantai/>
    <Lauantai/>
    {(() => {
      if (set.getWeekstart == "Maanantai") {
        return (
          <Sunnuntai/>
        )
      }
    })()}
  </div>
);

解决方案 #

React要求可渲染的组件是组件类/函数本身，而非类的实例。不能通过new实例化组件类，正确做法是直接在JSX中以标签形式使用组件，并通过props传递数据。

修改步骤：

• 移除实例化代码：删除所有new DayLayout(...)和new Settings的代码，直接在JSX中使用组件标签并传递对应数据。
• 修正组件名称大小写：React组件必须首字母大写，原代码中的<keskiviikko/>会被识别为HTML标签，需改为大写开头（这里统一用<DayLayout>传递不同props更简洁）。
• 调整配置获取方式：若Settings用于获取周起始配置，不要实例化，可通过静态方法、Context或props将配置传递到当前组件。

修改后的代码示例

return (
  <div>
    <div><h3>Otsikko palkki</h3></div>
    {(() => {
      // 假设周起始配置从当前组件state/props获取，或通过Settings静态方法获取
      const weekstart = d.state.weekstart; // 或 Settings.getWeekstart()
      if (weekstart !== "Maanantai") {
        return <DayLayout dayData={d.state.sunnuntai} />;
      }
    })()}
    <DayLayout dayData={d.state.maanantai} />
    <DayLayout dayData={d.state.tiistai} />
    <DayLayout dayData={d.state.keskiviikko} />
    <DayLayout dayData={d.state.torstai} />
    <DayLayout dayData={d.state.perjantai} />
    <DayLayout dayData={d.state.lauantai} />
    {(() => {
      const weekstart = d.state.weekstart; // 或 Settings.getWeekstart()
      if (weekstart === "Maanantai") {
        return <DayLayout dayData={d.state.sunnuntai} />;
      }
    })()}
  </div>
);

补充说明

• 若DayLayout是类组件，确保它接收dayData（或你定义的props名）并在内部使用该数据渲染内容。
• 若Settings需要提供全局配置，建议使用React Context或静态方法实现，避免实例化组件类。

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