Javascript 什么是<；组件呈现={（{state}）=>；{}}/>；你有什么反应？

我目前正在学习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;

函数home（）{
返回(
{
返回(
幻灯片1
幻灯片2
);
}}
/>
)
}
导出默认主页；

---

现在我的问题是，

render={（{state，fullpageApi}）=>{return（）；}}}/>

？我可以看出它是一个属性，但我并不真正了解它的用途。

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

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

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

render=

是XML，我们不关心它。它是HTML：您正在将一个属性传递给

组件

元素。括号

{}

表示它是HTML代码中的JS：这意味着您将JS值赋予元素的

render

属性。在

{}

之间的剩余JS代码是：

（{state，fullpageApi}）=>{return（/**HTML*/）；}

这是一个函数！因此，

render

prop采用了一个可能稍后执行的函数

---

这个匿名函数将对象作为参数，但它会对其进行分解，只使用

状态

和

fullpageAPI

道具，这样就可以将它们用作变量：例如，您可以编写

状态

，而不是编写

对象状态

。然后返回括号中的XML。

这是一种称为渲染属性的模式。这是一种通过代码和ReactFullpage中的代码之间的双向通信来决定要呈现什么的方法

您将函数作为道具之一传入。这是一件相当常见的事情，比如将函数传递给onClick道具。这里的特殊之处在于如何使用该函数

当ReactFullpage呈现时，它将调用您的函数。它的基本意思是“嘿，这里有一些数据（state和fullPageApi）。您希望我基于这些数据呈现什么？”然后，您的函数计算并返回您希望它呈现的元素。然后，ReactFullpage将在其最终输出中使用这些元素

---

有关渲染道具的更多信息，请参阅

阅读有关渲染道具的官方文档。不是XML，而是JSX语法。@Bergi这是XML。这是HTML使用的语法，HTML是XML。JSX所做的只是允许用JS编写XML。但是

或

是绝对不属于XML的特性。当然，JSX的灵感来自SGML及其衍生物，但它并不相同。你完全正确，但括号中的JS部分没有提到，我只是简单地使用了

render=

，而不是后面的

{}

。它也可能是一根弦，其实并不重要；这部分是XML。