Question

我从React开始并且对ES6有一些经验，并且我试图围绕一个基本的组件定义，我在react-redux-starterkit找到了

export const Counter = (props) => (
  <div style={{ margin: '0 auto' }} >
    <h2>Counter: {props.counter}</h2>
    <button className='btn btn-default' onClick={props.increment}>
      Increment
    </button>
    {' '}
    <button className='btn btn-default' onClick={props.doubleAsync}>
      Double (Async)
    </button>
  </div>
)

export default Counter

当我通过Babel的online transpiler运行它时，我发现这个转变为：

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
var Counter = exports.Counter = function Counter(props) {
  return React.createElement(
    'div',
    { style: { margin: '0 auto' } },
    React.createElement(
      'h2',
      null,
      'Counter: ',
      props.counter
    ),
    React.createElement(
      'button',
      { className: 'btn btn-default', onClick: props.increment },
      'Increment'
    ),
    ' ',
    React.createElement(
      'button',
      { className: 'btn btn-default', onClick: props.doubleAsync },
      'Double (Async)'
    )
  );
};

exports.default = Counter;

显然，这已经过了，因为我检查了反应选项。

但是我在理解语法方面遇到了一些麻烦。例如，我看到首先有一个export const Counter语句，它清楚地导出一个名为Counter的常量，它是一个函数。我认为它是一个常数，因为类中的任何东西都不能在将来改变它。

但最后还有一个export default Counter，这是将文件导入另一个文件时导出的内容。

我不明白的是，React.createElement是如何进入的？我甚至没有在这个文件中导入React。我没有看到我在大多数教程中看到的基于JSX类的普通语法。这就是如何在Babel上编译JSX吗？为新秀问题道歉。

Answer 1

＆＃34;这就是如何在Babel＆＃34;

是。在React中，JSX被用作＆＃34;使用这些组件和道具调用React.createElement的声明形式。＆＃34;

这就是为什么使用JSX的React文件如果忘记import React from "react"就无法编译，即使你没有明确引用React。

React JSX - Babel Transpilation - 它是如何工作的？

1 个答案: