javascript - 了解 React Component 期望来自另一个 Component 的 props

Question

有没有办法从另一个组件 C 列出组件 A 或 B 的预期 Prop ？

为什么？使用用户输入动态添加/删除组件及其 Prop 。

这可能吗？我只需要知道每个组件需要哪些 Prop 。

A 和 B 接受不同的 props。例如:

 <A bar="foo"/>, <B baz=5 other="thing" />

假设草图:

import A from "A"
import B from "B"

class C extends React.Component {

    componentDidMount() {
        const props_for_A = A.props; // ??
        const props_for_B = B.props; // ??

        const user_input_props = [];

        const _flag = prompt("Insert Component A or B ?")
        switch(_flag) {
            case A:
                // Get the props for A
                forEach(prop in props_for_A)
                    user_input_props[prop] = prompt(`Please input ${prop}`);          
                break;
            case B:
                // Get the props for B
                forEach(prop in props_for_B)
                    user_input_props[prop] = prompt(`Please input ${prop}`);          break;    
        }                       
    }

    render() {
        switch(_flag) {
             case A:
                 return <A ...user_input_props />;
             case B:
                 return <B ...user_input_props />;
        }
}

Answer 1

如果您可以控制 A 和 B 组件，您可以向其添加任何静态变量，例如 acceptedProps

A.acceptedProps = [ "bar" ]
B.acceptedProps = [ "baz", "other"]

然后只需更改您的代码以检查 acceptedProps 或 props

 const props_for_A = A.acceptedProps
 // ....

如果您无法控制A 和B，您可以同意使用prop-types。然后你的代码将是

const props_for_A = Object.keys(A.propTypes)
const props_for_B = Object.keys(B.propTypes)
// ....