将函数传递给React中的组件

Question

假设我们将组件Abc用作：

<Abc>
{
   param => {xxx}   //  anonymous arrow function 
}
</Abc>

那么Abc组件如何在内部使用匿名函数？我的意思是在Abc组件的源代码中，

export class Abc extends Component {

   ...
   this.??.??   // how to invoke the anonymous function whenthe function doesn't even have a name?
}

Answer 1

这是一种称为render props的技术。

function Abc({ children }) {
  return children('data from abc')
}

您可以用作

<div>
  <Abc>{dataFromAbc => dataFromAbc}</Abc>
</div>

请记住

<Abc>{dataFromAbc => dataFromAbc}</Abc>

等同于

<Abc children={dataFromAbc => dataFromAbc} />

因此可以从children道具中调用您的函数。 this.props.children()（如果您是班级成员）。