如何解决<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。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。