如何在没有 module.exports（供 ACE 编辑器使用）的情况下使用 transform-react-jsx 获得 Babel 以正确转换组件？

Question

首先是一些背景知识：我正在尝试为一周前为编码挑战制作的 React-Clone 设置交互式 "Try It"。例如，这是我正在处理的示例之一 Create Component

无论如何，当我使用 Babel 和 Webpack 或 browserify 时，我制作的 React-clone 工作得很好，如下所示：

const Trends = EX.component({
 componentName: 'trends',
 componentRender: (props) => {
  return (
    <div class="col-xs-12">
      <h2>{props.ex_thing.stuff}</h2> 
    </div>
  )
 }
});
module.exports = Trends;

父组件：

 const Trends   = require("./trends.js");

 <Trends ex_thing={anObject} />

 //compiles to: 

 Trends({ex_thing: anObject})

但是！如果我定义没有 commonJS 的组件，它会将编译成 EX.node("Trends", {ex_thing: anObject}).仅供参考：EX.node 是我制作的 React-Clone 所使用的。

在 Google 驱动器上，我有两个 HTML 文件，一个有效，名为 works.html，另一个已损坏 broken.html，需要零设置，在ChromeTwo HTML files

中点击打开即可

唯一的区别是对于 works.html 我没有在 JSX 中编写组件 NameTag 因为它像元素而不是函数一样编译它。编译后的代码记录在控制台中。

如何让 Babel 将 NameTag 编译为 NameTag({ex_person:itm}) 而不是 EX.node('NameTag',{ex_person:itm} ) ?

谢谢

Answer 1

Opps:对不起大家我是个白痴。我最近注意到 React 像我一样转译组件。

例如，像 Trends 这样的组件在 React 中编译如下：

  React.createElement(Trends, { ex_thing: anObject });

所以我所做的是更改创建 vDom 的函数，以检查 Tagname 是否实际上是此处的函数：

NodeMap.prototype.node = (type, props = {}, ...nested) => {
  if (typeof type === "function") {
    return type(props);
  }
 nested = nested ? smoothNested(nested) : [];
 return {
   type,
   props,
   nested
 };
}

现在 broken.html 有效了！

如何在没有 module.exports（供 ACE 编辑器使用）的情况下使用 transform-react-jsx 获得 Babel 以正确转换组件？

How can I get Babel with transform-react-jsx to properly transform a component without module.exports(for ACE editor use)?

javascript

reactjs

webpack

react-jsx

babeljs