如何在React组件C中获取A、B的预期Props？能否实现动态组件操作？

解决React组件中获取其他组件预期Props的问题 #

嘿，这个问题问得挺实际的！先直接说结论：你当前写的A.props是行不通的——因为组件类/函数本身并没有props这个静态属性（除非你手动给它添加）。不过要获取A、B这类组件的预期Props，还是有几种靠谱的方案的，我给你一一拆解：

1. 手动给组件添加静态预期Props属性（最直接可控） #

如果你能掌控组件A和B的代码，最简单的方式就是给它们定义一个静态属性，比如expectedProps，配合PropTypes还能同时做类型校验：

// 组件A的示例代码
import React from 'react';
import PropTypes from 'prop-types';

class A extends React.Component {
  // 定义预期的Props结构
  static expectedProps = {
    bar: PropTypes.string.isRequired
  };

  render() {
    return <div>{this.props.bar}</div>;
  }
}

// 函数组件也适用
function B(props) {
  return <div>{props.baz} - {props.other}</div>;
}
B.expectedProps = {
  baz: PropTypes.number.isRequired,
  other: PropTypes.string
};

然后在组件C里就能直接读取这个静态属性了：

import A from "./A";
import B from "./B";

class C extends React.Component {
  componentDidMount() {
    const props_for_A = A.expectedProps;
    const props_for_B = B.expectedProps;
    console.log(props_for_A); // 输出包含bar的PropTypes定义
  }
}

2. 直接读取组件的propTypes属性（如果已用PropTypes） #

很多项目已经用PropTypes来约束组件的Props类型了，而PropTypes会被挂载到组件的propTypes静态属性上，所以你可以直接读取这个属性来获取预期的Props列表：

// 组件B的代码（已定义propTypes）
class B extends React.Component {
  static propTypes = {
    baz: PropTypes.number.isRequired,
    other: PropTypes.string
  };
}

// 组件C中读取
componentDidMount() {
  const props_for_B = B.propTypes;
  console.log(props_for_B); // 输出baz和other的校验规则
}

注意：这里拿到的是PropTypes的校验函数，不是具体的属性值，但足够让你知道组件预期接收哪些Props。

3. TypeScript项目中提取Props类型（类型层面） #

如果你的项目用了TypeScript，可以直接从组件的Props接口/类型中提取信息：

// 组件A的TS代码
interface AProps {
  bar: string;
}
const A: React.FC<AProps> = (props) => <div>{props.bar}</div>;

// 组件C中提取类型
type AExpectedProps = AProps; // 直接复用接口
// 或者如果无法直接导入接口，通过组件函数提取
type APropsFromComponent = Parameters<typeof A>[0];

不过这是类型层面的提取，运行时无法获取具体值，要是需要运行时的Props信息，还是得结合前面的静态属性方案。

为什么原来的A.props不行？ #

再补个小知识点：A是组件类/函数本身，只有组件的实例才有props属性（比如A组件内部的this.props，或者函数组件的参数props）。组件本身并没有默认的props静态属性，所以直接访问A.props会得到undefined。

内容的提问来源于stack exchange，提问作者juancho