Question

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

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

有可能吗？我需要的只是知道每个组件所期望的道具。

A和B接受不同的道具。例如：

 <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或道具

 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)
// ....

Answer 2

我认为要实现你想要的，你必须重写所有的组件......

class App extends React.Component {
  constructor(props) {
  super(props);

  if(typeof props.name === 'undefined') {
    console.log('name is missing');
  }
}

如果设置了道具，您可以检查组件的构造函数。如果没有，您可以通知用户。

为了简化此操作，请查看此Codepen：https://codepen.io/JanickFischr/pen/xjbpXV

有了这个，你可以简化一切。

知道来自另一个组件的React Component预期道具

2 个答案: