REACT：如何在 return 语句中呈现 var Component = new Component？答案

【问题标题】：REACT: How to render var Component = new Component in return statement?REACT：如何在 return 语句中呈现 var Component = new Component？
【发布时间】：2022-11-20 21:40:53
【问题描述】：

这是在 Class 组件内部（d 是返回日期对象，set 是设置组件）

 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>
  );

我正在尝试呈现多个工作日表。 VisualStudio 代码如何显示此代码中的错误并且无法正常工作。不知何故，它不接受新类作为对象，是否有来自类对象的来源和组件？

【问题讨论】：

向我们展示DayLayout 的代码。同样在一般情况下，初始化一个类将返回一个工作组件对我来说没有意义。为什么不创建一个接受 DayLayout 构造函数中的参数作为 props 的组件，并让它作为一个普通组件工作，在那里做任何它需要的事情。为什么需要通过类初始化来生成组件？那不是正确的方法
哦，是的，我可以直接将专业人士传递给 Day Layout 而无需初始化新类，感谢我来自 C 和 C++ 的回复，我们就是这样做的。
但是，如果我尝试添加概率，它会再次出现问题，即不将代码设置为蓝色并在红色下划线，我如何使用 <DayLayout day={d.state.maanantai} 它会给出错误...

标签： reactjs

【解决方案1】：

代替

{(() => {
        if (set.getWeekstart != "Maanantai") {
          return (
            <Sunnuntai/>
          )
        }
      })()}

用这个

{set.getWeekstart != "Maanantai" && <Sunnuntai/> }

或者

{set.getWeekstart != "Maanantai" ? <Sunnuntai/>  : null}

【讨论】：

【解决方案2】：

您可以尝试的一些方法

const SomeComponent = (props) => {

  // if you dont want new Settings() to be called on every render
  const settings = useMemo(() => {
  
     return new Settings()

  }, []) // dependencies for settings or just move settings out of the component

  const Tiistai = useMemo(() => {
      // if you need to construct the component in a specific way
      // const propsCreator = new DayLayout(d.state.tiistai)
      // return (props) => <RenderComponent {...props} {...propsCreator.getProps() } />
      return (props) => <DayLayout {...props} state={d.state.tiistai} />

  }, [d.state.tiistai]) 
  

  return (
     ...
     // approach one
     <Maanantai state={d.state.maanantai} />
    // approach two
    <Tiistai/>
    ...
  )

}

希望它能以某种方式帮助你

【讨论】：

【解决方案3】：

让它工作，对所有回复征税，它们非常有帮助：

import React from "react";
import DayLayout from "./komponentit/day";
import Settings from "./settings"
import Dates from "./komponentit/dates";

var n = new date();
var d = new Dates(n)
//Eli daylayout tarvii tietää milloinkin aktiivisen viikon
//pitää hakea pvm atlasianiasta tai hakea nykyinen viikk
set = new Settings

class ViikkoLayout extends React.Component {
  state = {
    Projektit: '',
    Tasks: '',
    pvm: '',
    date: '',
    week: ''

  };
  /*const [columns, setColumns] = useState(columns);*/
  // Pitää editoida tähän asetusten mukainen muutos onko MA vai SU ekapaiva

  render() {
    return (
      <div>
        <h3>Otsikko palkki</h3>
        {set.getWeekstart != "Maanantai" && <DayLayout day={...d.state.sunnuntai}/> }
        <DayLayout day={...d.state.maanantai}/>
        <DayLayout day={...d.state.tiistai}/>
        <DayLayout day={...d.state.keskiviikko}/>
        <DayLayout day={...d.state.torstai}/>
        <DayLayout day={...d.state.perjantai}/>
        <DayLayout day={...d.state.lauantai}/>
        {set.getWeekstart == "Maanantai" && <DayLayout day={...d.state.sunnuntai}/> }
      </div>
    )
  }
}

export default ViikkoLayout;

【讨论】：