JavaScript 函数语法？导出默认 ({...}) => (<查看 .... >)

【问题标题】：JavaScript function syntax? export default ({...}) => (<View .... >)JavaScript 函数语法？导出默认 ({...}) => (<查看 .... >)
【发布时间】：2017-11-07 01:52:48
【问题描述】：

在this ReactVR example，我看到了这样的语法：

export default ({ style }) => (
  <View style={style}> ...
)

我已经完成了一些 ES6/TypeScript，但这对我来说似乎没什么。

它有什么作用？它是 React 还是 JSX 特定的？（我是这两个新手，搜了没找到。）

另外，如何将其转换为普通的基于类的组件？

【问题讨论】：

得到答案后，我从标题中删除了 ReactJS。
您对哪一部分感到困惑？是的，( <View style={style}> ) 绝对是 JSX 特有的。

标签： reactjs ecmascript-6 destructuring

【解决方案1】：

代码正在导出stateless functional component。

这是一个匿名的 es6 arrow function，它接收到的参数是 object destructuring。

也可以这样写：

const YourComponent = props => {
  const { style } = props;
  return (
    <View style={style}>...
  );
};
export default YourComponent;

要转换为基于类的组件，您可以这样做：

import React, { Component } from 'react';
export default class YourComponent extends Component {
  render () {
    const { style } = this.props;
    return (
      <View style={style}>...
    );
  }
}

【讨论】：

确实，它并没有引起我的注意，因为它只是一个项目，并且被缩短为一个参数。谢谢！
不客气！我第一次也有点卡在这个上，但我现在经常使用它。