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

Question

在这个ReactVR示例中，我看到了以下语法：

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

我已经做了一些ES6/TypeScript，但这对我来说似乎什么都不是。

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

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

Answer 1

代码正在导出无状态功能组件。

这是一个带有对象的匿名 es6 箭头函数解构它接收的参数。

也可以这样写：

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}>...
    );
  }
}