<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

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

Answer 2

我也在学习 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。

Answer 3

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

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

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

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

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

What does <Component render={({ state }) => {}} /> do in React?

javascript

reactjs

fullpage.js