Question

我还很陌生，这是我要解决的问题。

有一个父级组件父级将道具传递给孩子。这些道具之一，包含一个要渲染的元素：

<child componentToBeRendered = {component} />

在孩子中，我想使用这个组件并将一个道具传递给它，这是在孩子本身中定义的。

function child(props){
    function toBePassed(){ ... }
    <props.componentToBeRendered fun = {toBePassed} />
}

我知道上面的代码是错误的，我们不能使用<props.componentToBeRendered>。那么如何将自定义道具传递给该组件？

我想到的呈现组件的唯一方法是：{props.componentToBeRendered};

如何使用在子级中定义的自定义道具来渲染此组件？

Answer 1

您可以重命名传递的组件prop，按常规进行渲染，然后按常规将prop传递给它。类似于Choosing the Type as Runtime

function Child(props){
    const ComponentToBeRendered = props.componentToBeRendered;

    function toBePassed(){ ... }

    return <ComponentToBeRendered fun={toBePassed} />;
}

我通常在函数签名中将这种模式与prop分解一起使用，重命名已分解的prop。

function Child({ componentToBeRendered: ComponentToBeRendered }) {
  function toBePassed(){ ... }

  return <ComponentToBeRendered fun={toBePassed} />;
}

Answer 2

例如，您可以使用React的顶级API，特别是React.createElement：

const MyChild1 = ({ num }) => <div>num1: {num}</div>;
const Parent = ({ comp }) => 
  <div>
    {React.createElement(comp, { num: 5 })}
    {React.createElement(comp, { num: 1 })}
  </div>
;

Answer 3

我认为您不应该通过组件作为道具而是将一个值传递给子级，该值指示要渲染的组件。

function Parent(){
   return <Child toBeRendered="contact"/>
}

function Child(props){
   let toBeRenderd;
   switch(props.toBeRendered){
      case 'contact' :
          toBeRendered = Contact;
      default :
          toBeRendered = Info
   }
   return <toBeRendered/>
}

如何将自定义道具传递给道具？

3 个答案: