反应传播运算符（...休息）的替代品？

Posted 2023-02-21

【中文标题】反应传播运算符（...休息）的替代品？

【英文标题】：React spread operator (...rest) alternatives?

【发布时间】：2018-07-31 07:19:03

【问题描述】：

我无法在我的管道中包含 babel-preset-stage-3。传播运算符有什么替代方案吗？

我正在尝试编译以下代码，但出现语法错误：

const PrivateRoute = ( component: Component, ...rest ) => (
  <Route
    ...rest
    render=props =>
      fakeAuth.isAuthenticated ? (
        <Component ...props />
      ) : (
        <Redirect
          to=
            pathname: "/login",
            state:  from: props.location 
          
        />
      )
    
  />
);

【问题讨论】：

简单地使用两个参数怎么样？

@Bergi 可以传入任意数量的参数，由函数的用户指定。

我的意思是const privateRoute = (component, rest) => …

【参考方案1】：

使用lodash.omit：

const PrivateRoute = (props) => 
  const Component = props.component;
  const rest = omit(props, ['component'])
  return (
  <Route
    ...rest
    render=props =>
      fakeAuth.isAuthenticated ? (
        <Component ...props />
      ) : (
        <Redirect
          to=
            pathname: "/login",
            state:  from: props.location 
          
        />
      )
    
  />
);

【讨论】：

这是有效的 jsx 语法，不依赖 babel-preset-stage-3。

babel-repl: goo.gl/VNCnvW

@BryanChen 这就是 JSX 属性传播，和 ES 对象传播的思路一样，但由 react-preset-react 处理。

【参考方案2】：

安装babel-plugin-transform-object-rest-spread

npm install --save-dev babel-plugin-transform-object-rest-spread

在您的 .babelrc 文件中，添加以下行

  "plugins": ["transform-object-rest-spread"]

【参考方案3】：

为简单起见尝试使用此功能：

                    var vals;
        console.log(typeof out)
        isobj = typeof(out) === 'object'?true:false


                if (Object.values) 
                    vals = Object.keys(obj).map(function(i)  
           if(isobj)
             out[i] = obj[i]; 

                    )
                else
                    vals= Object.values(obj) 
                return vals;
````

【讨论】：

这样简单吗？

尝试使用更好的格式并解决代码中的错误。