强制支柱应为两个功能组件之一

发布于 2025-02-01 21:55:18 字数 510 浏览 5 评论 0原文

我想强制执行道具应该是两个不同的组件之一，基本上是这样：

MyComponent.propTypes {
      propA: PropTypes.oneOfType([
        PropTypes.instanceOf(ClassComponentA)
        PropTypes.instanceOf(ClassComponentB)
      ]),
}

仅当classComponenta和classComponentB都是类组件时，它才能起作用。当classComponenta和classComponentB都是功能组件时，我该如何工作？该解决方案不必使用 proptypes 。

原文

I want to enforce a prop should be one of two different components, basically this:

MyComponent.propTypes {
      propA: PropTypes.oneOfType([
        PropTypes.instanceOf(ClassComponentA)
        PropTypes.instanceOf(ClassComponentB)
      ]),
}

The problem with this is it only works if ClassComponentA and ClassComponentB both are class components. How can I make it work when ClassComponentA and ClassComponentB are both functional components? The solution doesn't have to use PropTypes.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

深空失忆 2025-02-08 21:55:18

好吧，功能组件只是接收道具并返回JSX元素的函数。

因此，您可以执行以下操作：

import React, { Component } from "react";
import { render } from "react-dom";
import PropTypes from "prop-types";

const Demo = ({ n }) => <div>{n}</div>;

export default class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello {this.props.name}</h1>
        {this.props.customProp}
      </div>
    );
  }
}

App.propTypes = {
  name: PropTypes.string.isRequired,
  customProp: function (props, propName, componentName) {
    // Here you can assert that props[propName].props are the ones you expect
  }
};

if (typeof window !== "undefined") {
  render(
    <App name="World" customProp={<Demo n={5} />} />,
    document.getElementById("root")
  );
}

在打字稿中，它可能更简单（在我看来）：

import "./styles.css";
import { ReactElement } from "react";

type C1Props = { n: number };
type C2Props = { a: number };

const C1 = ({ n }: C1Props) => <div>{n}</div>;
const C2 = ({ a }: C2Props) => <div></div>;

const Demo = ({ propA }: { propA: ReactElement<C1Props> | ReactElement<C2Props> }) => (
  <div>Hello {propA}</div>
);

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Demo propA={<C1 n={5} />} />
    </div>
  );
}

编辑：更好的打字稿版本

Well, a functional component is just a function that receives props and returns a JSX Element.

So you could do something like the following:

import React, { Component } from "react";
import { render } from "react-dom";
import PropTypes from "prop-types";

const Demo = ({ n }) => <div>{n}</div>;

export default class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello {this.props.name}</h1>
        {this.props.customProp}
      </div>
    );
  }
}

App.propTypes = {
  name: PropTypes.string.isRequired,
  customProp: function (props, propName, componentName) {
    // Here you can assert that props[propName].props are the ones you expect
  }
};

if (typeof window !== "undefined") {
  render(
    <App name="World" customProp={<Demo n={5} />} />,
    document.getElementById("root")
  );
}

In typescript, it could be a little more simple (in my opinion):

import "./styles.css";
import { ReactElement } from "react";

type C1Props = { n: number };
type C2Props = { a: number };

const C1 = ({ n }: C1Props) => <div>{n}</div>;
const C2 = ({ a }: C2Props) => <div></div>;

const Demo = ({ propA }: { propA: ReactElement<C1Props> | ReactElement<C2Props> }) => (
  <div>Hello {propA}</div>
);

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Demo propA={<C1 n={5} />} />
    </div>
  );
}

EDIT: Better typescript version

回复收藏 0 原文

~没有更多了~