React中render={({state,fullpageApi})=>{}}写法的作用是什么

这个写法是React生态里典型的**Render Prop（渲染属性）**实现逻辑，是react-fullpage库专门设计的交互约定，并非React框架原生的特殊语法。具体可以拆成三部分理解：

• 为什么库要专门用这个属性而不是用普通的children传内容？
  因为react-fullpage需要把自己内部维护的运行状态、操作方法主动传递给你写的页面代码，如果直接让你在组件标签中间写children内容，库就没有办法把内部的能力注入到你的页面逻辑里。这种模式本质是把“渲染什么内容”的主动权交给你，把“怎么提供全屏滚动能力”的逻辑交给库。

• 函数括号里的({ state, fullpageApi })是什么？
  这是JS的对象解构语法：库在调用你传进来的这个函数时，会自动传入一个结构固定的参数对象，你直接在参数位置把对象里的两个核心值拆出来用，省了单独写一行解构赋值的步骤。这两个值的作用分别是：

  • state：fullPageJS实时同步的运行状态，比如当前所在的屏幕索引、滚动方向、是否正在执行切换动画等。只要页面发生滚动切换，这个值就会自动更新，你后续做“某一屏滚动到视口时触发元素进场动画”这类逻辑时，就可以靠这个值做判断。
  • fullpageApi：fullPageJS所有可调用方法的集合，比如写个按钮点击直接跳转到第三屏、临时锁定页面滚动、回到顶部，直接调用fullpageApi上的对应方法就行，不需要自己全局查找fullPage的实例。

• 函数内部return的内容是什么？
  就是你自己定义的页面结构——也就是你代码里用ReactFullpage.Wrapper包裹的、带.section类的两个全屏模块。库拿到你return的JSX后，会给这些结构套上自己实现的全屏滚动容器、绑定滚轮/触摸滑动的监听逻辑、注入必要的全局样式，最后把完整的可交互结构渲染到页面上。

补充说明：你现在的代码虽然能正常运行，但其实还没用到state和fullpageApi这两个参数——因为你目前只做了最基础的两屏静态展示，没有加自定义交互，所以会觉得这两个参数是冗余的。等你需要定制滚动行为、加屏幕切换动效时，就能直接用上库传进来的能力，不用自己从零封装fullPageJS的接入逻辑。

内容的提问来源于stack exchange，提问作者Rowan van Zijl