延迟JSX评估

Question

我有一个函数返回JSX到一些React组件。我意识到我还需要在JSX中包含这些组件的一些状态变量。每个组件都可能需要更改JSX或其中的值(或同时更改两者)。请看下面的代码:

export function getDisplayBlock(a: number) {
if (a == 1) {
return <>{title}</>;
} else if (a == 2) {
return (
<>
{title}
{subtitle}
</>
);
} else if (a == 3) {
return (
<>
<img src={companyLogo} />
{caption}
</>
);
}
}

这不起作用，因为在getDisplayBlock中，title,subtitle,companyLogo和caption是未知的。我考虑了一些变通方法:

• 将所有这些(title,subtitle)作为另一个参数传递给函数。这需要在每次更新这些变量时调用函数

• 返回字符串而不是JSX并将参数值替换为regex，然后使用dangerouslySetInnerHTML。

• "攻击你;(这里的优点是只需调用一次函数即可获得组件所需的JSX):

  export function getDisplayBlock(this: any, a: number) {
  if (a == 1) {
  return () => <>{this.state.title}</>;
  } else if (a == 2) {
  return () => (
  <>
  {this.state.title}
  {this.state.subtitle}
  </>
  );
  } else {
  return () => (
  <>
  <img src={this.state.companyLogo} />
  {this.state.caption}
  </>
  );
  }
  }
  

谢谢!

Answer 1

没有办法刷新函数的返回值而不召回它。你可以签出类似React的东西。上下文是您感兴趣的，尽管它不会真正改善对呈现代码的调用数量，从而提高性能(这是关注的问题吗?)。

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

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

每个刷新的问题更新:如果您想控制传入的JSX，可能在子组件中呈现子组件将为您工作，如下所示:

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

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

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