延迟 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，并用正则表达式替换参数值，然后使用dangerouslySetInnerHTML。

• “Hack it”（这里的好处是你调用一次函数来获取组件需要的 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.Context 之类的内容是否是您感兴趣的内容，尽管它不会真正提高对渲染代码的调用量并因此提高性能（这是问题吗？）。

我不完全理解用例，即如果父组件总是只渲染一个 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>