<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 中的代码之间的双向通信来决定渲染什么的方法。

您将函数作为道具之一传入。仅此一项就相当常见，例如将函数传递给 onClick 道具。这里的特别之处在于该函数的使用方式。

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

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

Answer 2

在 react 中，render 是一种告诉 react 显示什么（DOM 应该是什么样子）的方法。方法或函数中的返回是方法或函数的输出。

Answer 3

我也在学习 React！但是由于您的问题只是与 JS 相关，因此这是您的答案。 首先，让我们将您的 sn-p 分解。

render={ ({ state, fullpageApi }) => { return (/** HTML */); } }

render= 是 XML，我们不关心它。它是 HTML：您将属性传递给 Component 元素。方括号 {} 表示它是 HTML 代码中的 JS：这意味着您将 JS 值赋予元素的 render 属性。 {} 之间的剩余 JS 代码是：

({ state, fullpageApi }) => { return (/** HTML */); }

这是一个函数！所以render 属性接受了一个可能稍后会执行的函数。

这个匿名函数接受一个对象作为参数，但它解构它并且只使用state 和fullpageAPI 属性，这使得可以将它们用作变量：而不是写obj.state，你会写state，作为一个例子。 You can read more about restructuring on the MDN docs。然后它returns 括号中的 XML。