javascript - <Component render={({ state }) => {}}/> 在 React 中做什么？

Question

我目前正在学习ReactJS，我想使用fullPageJS。它工作正常，但有一些语法我不太明白。

组件:

   function home() {
    return (
        <ReactFullpage
            render={({ state, fullpageApi }) => {
            return (
                <ReactFullpage.Wrapper>
                    <div className="section">
                        <h1>Slide 1</h1>
                    </div>
                    <div className="section">
                        <h1>Slide 2</h1>
                    </div>
                </ReactFullpage.Wrapper>
            );
            }}
        />
    )
}
export default home;

现在我的问题是，render={({ state, fullpageApi }) => { return(); 做什么？ }}/> 做什么？我可以看到它是一个属性，但我不太明白它的用途是什么。

Answer 1

这是一种称为 Render Prop 的模式。它是一种通过代码与 ReactFullpage 中的代码之间的双向通信来决定渲染内容的方法。

您将一个函数作为 props 之一传递。这本身就是一件相当常见的事情，例如将函数传递给 onClick 属性。这里的特别之处在于该函数的使用方式。

当 ReactFullpage 渲染时，它会调用你的函数。它基本上是在说“嘿，这里有一些数据(状态和 fullPageApi)。您希望我根据这些数据呈现什么？”然后，您的函数计算并返回您希望其呈现的元素。然后 ReactFullpage 将在其最终输出中使用这些元素。

有关渲染 Prop 的更多信息，请参阅 react's documentation on the pattern