javascript - 如何将自定义 Prop 传递给 Prop ？

Question

我对 react 还很陌生，这是我正在努力解决的问题。
有一个父组件 家长 它将 Prop 传递给 child 。
其中一个 Prop ，包括一个要渲染的元素，如下所示:

<child componentToBeRendered = {component} />

在子组件中，我想获取这个组件并将一个 prop 传递给它，它是在子组件本身中定义的。

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

我知道上面的代码是错误的，我们不能使用 <props.componentToBeRendered> .那么如何将自定义 Prop 传递给这个组件呢？
我能想到的渲染组件的唯一方法是: {props.componentToBeRendered};如何使用子项中定义的自定义 Prop 渲染此组件？

Answer 1

您可以重命名传递的组件 prop，照常渲染它，并照常将 props 传递给它。类似于 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} />;
}