Question

如何使用另一个组件中的各个函数，这些函数在React中使用传播运算符作为道具传递。

const Component=(props)=>
{
  const A=()=>  
   {  
    }
  const B=()=>
    {
    }
  render(){
         return(
                <Anothercomponent RenderChild={(props)=>{<Component {...props} />}}
                );
          }
 }


const Anothercomponent=()=>
   {
       render(){
       const {RenderChild} = this.props;
       return(

                 //how to consume function A here
              );
    }

Answer 1

如果不使用任何.this上下文，则可以将Component设为React.Component并将A函数声明为静态方法。因此，要使用它，只需调用Component.A（）learn more

Answer 2

首先，您尚未传递函数A和B作为道具

第二，您正在使用功能组件，因此可以从函数参数而不是this.props访问props。另外它需要使用render方法。如果使用渲染，则需要将组件定义为类组件

const Anothercomponent=(props)=> {
    const { RenderChild } = props;
    return(
        <div>Another component</div>
    );
}

const Component=(props)=> {
   const A=()=> {}
   const B=()=> {}
   return(
        <Anothercomponent RenderChild={(props)=>{<Component {...props} />}}
  );
}

如何使用使用散布运算符的props传递的函数

2 个答案: