时间戳

首页 > 解决方案 > React 传递道具

reactjs - React 传递道具

问题描述

const App = () = {
 return(
  <Article 
    render={
      (getContextProps) => (
      <Context {...getContextProps()}>{sometext}</Context>
    )}
  />
 )
}

大家好，最近我遇到了这段代码，react中的函数组件，在我传入的render属性中，它有getContextProps一个变量，我对什么是{...getContextProps()}手段感到困惑，我的理解是需要getContextProps作为道具传递给子上下文组件使用rest 运算符作为属性，但我不知道为什么语法是{...getContextProps()}一个变量或一个函数？这是 React 的一些特殊语法吗？

标签： reactjs

解决方案

上面的例子是一个使用JSX spread attributes syntax动态弹出消息传递给 Context 组件的例子。

上述代码的简化版本是

const App = () = {
 return(
  <Article 
    render={
      (getContextProps) => {
      const props = getContextProps();
     (
      <Context {...props}>{sometext}</Context>
    )}}
  />
 )
}

现在在上面的代码中，getContextProps将返回一个对象，您可以将传递作为道具传播给Context组件

推荐阅读