Reactjs 延迟JSX评估

我有一个函数，它将JSX返回给一些React组件。我意识到我还需要在JSX中包含这些组件的一些状态变量。每个组件可能需要更改JSX或其中的值（或同时更改两者）。请参阅下面的代码

导出函数getDisplayBlock（a:编号）{
如果（a==1）{
返回{title}；
}如果（a==2），则为else{
返回(
{title}
{副标题}
);
}如果（a==3），则为else{
返回(
{标题}
);
}
}

这不起作用，因为在

getDisplayBlock

中，

标题

、

副标题

、

companyLogo

和

标题

是未知的。 我考虑了一些变通办法：

• 将所有这些（

  title

  ，

  subtitle

  ）作为另一个参数传递给函数。这需要在每次更新这些变量时调用函数

• 返回一个字符串而不是JSX，并用regex替换参数值，然后使用

  危险的LySetinerHTML

• “Hack it”（这里的优点是您只需调用一次函数即可获得组件所需的JSX）：

  导出函数getDisplayBlock（this:any，a:number）{
  如果（a==1）{
  return（）=>{this.state.title}；
  }如果（a==2），则为else{
  return（）=>(
  {this.state.title}
  {this.state.subtitle}
  );
  }否则{
  return（）=>(
  {this.state.caption}
  );
  }
  }
  

---

任何想法都值得赞赏

在不调用函数的情况下，无法刷新函数的返回值。您可以检查React.Context之类的内容是否是您感兴趣的内容，尽管它不会真正提高对呈现代码的调用量，从而提高性能（这是问题所在吗？）

我不完全理解这个用例，也就是说，如果父组件总是只呈现一个jsx返回值，那么将它们分散到单独的组件中，而不是将它们放在同一个函数中

最终结果将是相同的，每次状态更新时都需要调用该函数。但是代码会更干净

更新每个刷新的问题： 如果您想要控制传入的JSX，那么在子组件中呈现子组件可能对您有用，如下所示：

const GetDisplayBlock = props => {
    const { a } = props;
    return (
      <>
        {a == 1 ? (
          <>{props.children}</>
        ) : a == 2 ? (
          <>
            <diV>{props.children}</diV>
          </>
        ) : (
          <>
            <p>{props.children}</p>
          </>
        )}
      </>
    );
  };
...

const GetDisplayBlock=props=>{
常量{a}=props；
返回(
{a==1(
{props.children}
)：a==2(
{props.children}
) : (
{props.children}

)}
);
};
...

然后在渲染调用中，可以这样调用它：

<GetDisplayBlock a={3}>
  <div>buyaka</div>
</GetDisplayBlock>

布亚卡

为什么函数中不知道这些变量？如果要更改，应该将它们用作state。我觉得奇怪的是，一个函数可以呈现三个不同的组件。但是，您可以将所有这些值作为对象的属性传递。也就是说，您还有一个参数，它是一个具有所需属性的对象。@这两个参数都处于调用该参数的组件的状态function@FelixKling这就是建议的解决方案1。在这种情况下，当客户端在运行时更改这些值时，它们不会在JSX中更新！如果任何值发生变化，我希望函数会再次被调用，从而生成一个新元素。它实际上与您建议的第三个解决方案没有什么不同，只是对象是通过

this

显式传递的。谢谢！是的，问题是性能，因为这是一个简化的示例：）我编辑了我的问题，说JSX或其中变量的值确实可能会改变-这是我的错误。我更新了我的答案，建议使用props.children，从而在父组件中决定渲染哪个子组件。看看这是否有效。