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

问题描述

我目前正在学习 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(); }} /> 有什么作用？我可以看到它是一个属性，但我真的不明白它的用途是什么。

解决方法

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

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

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

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

,

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

,

我也在学习 React！但是由于您的问题仅与 JS 相关，因此这是您的答案。 首先，让我们将您的代码片段分成几部分。

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。然后它return是括号中的 XML。