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

Question

在 this ReactVR example 中，我看到了这个语法：

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

我做了一些 ES6/TypeScript 但这对我来说似乎没什么。

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

此外，如何将其转换为正常的基于 class 的组件？

Answer 1

代码正在导出 stateless functional component。

这是一个匿名的 es6 arrow function 对象它接收到的参数的解构。

也可以这样写：

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

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

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

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

JavaScript function syntax? export default ({...}) => (<View .... >)

destructuring

ecmascript-6

reactjs