reactjs - react + typescript 语法 : Dynamically change container component

Question

在 React+TypeScript 中有没有一种干净的方法来编写下面的这种语法？当我这样做时，出现以下错误。

JSX element type 'Container' does not have any construct or call signatures.

代码:

const Container = this.props.useFoo ? <Foo {...fooProps}></Foo> : <div></div>;

return (
        <Container>
            <div {...someAttrs}>
                {this.props.children}
            </div>
        </Container>
);

我知道我可以用字符串动态定义容器标签，即 Tag = "div" ，并使用 <Tag>...</Tag> ，但这似乎不适用于组件。我能做到这一点的唯一方法是将子内容保存到一个变量中，然后执行以下我发现它冗长且丑陋的操作。

const content = <div {...someAttrs}>{this.props.children}</div>;

return (
    <>
        {this.props.useFoo ? <Foo {...fooProps}>{content}</Foo> : <div>{content}</div>}
    </>
);

编辑:

我决定采用这种语法:

const container = (content) => {
    return this.props.useFoo ? <Foo {...fooProps}>{content}</Foo> : <div>{content}</div>;
};

return container(
    <div {...someAttrs}>
        {this.props.children}
    </div>
);

Answer 1

⚠ 请注意，我刚刚开始使用“TypeScript”(使用 React)。

您似乎正在将呈现的组件实例分配给 Container，而不是指定容器的形状(类)应该是什么。

所以你需要传递类或内在字符串，"div" 并将容器设置为React.ReactType(可以是类、功能组件或内在的，例如 div、p、span 等)。

function Demo(props: DemoProps) {
  const Container: React.ReactType = props.useFoo ? Foo : "div";

  return (
    <Container>
      <div>{props.children}</div>
    </Container>
  );
}

您可以在 Sandbox 上查看演示。

---

完整源代码，以防沙盒链接失效。

代码

import * as React from "react";
import { render } from "react-dom";

import "./styles.css";

interface DemoProps {
  useFoo?: boolean;
  children: string | JSX.Element | JSX.Element[];
}

const Foo = () => <div>Foo</div>;

function Demo(props: DemoProps) {
  const Container: React.ReactType = props.useFoo ? Foo : "div";

  return (
    <Container>
      <div>{props.children}</div>
    </Container>
  );
}

function App() {
  return (
    <div>
      <Demo useFoo>This is a demo App</Demo>
      <Demo>This is a demo App</Demo>
    </div>
  );
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);

结果

☝ 您可以看到当使用 useFoo 时，容器覆盖了子内容。