我如何让Babel与transform-react-jsx正确转换组件没有模块.导出(供ACE编辑器使用)

Question

首先介绍一些背景:我正在尝试为一周前为编码挑战制作的React-Clone设置一个交互式的"Try It"。例如，下面是我正在创建组件

的一个示例

无论如何，当我使用Babel和Webpack或browserify我所做的react克隆时，工作得很好，如下所示:

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。("Trends"， {ex_thing: anObject})。供参考:交货。node是我为我制作的React-Clone使用的。

在谷歌驱动器上，我有两个HTML文件，一个是works. HTML ，另一个是破碎的broken. HTML ，它需要零设置，只需点击并在Chrome中打开两个HTML文件

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

如何让Babel编译NameTag到NameTag({ex_person:itm})而不是EX。node('NameTag'，{ex_person:itm}) ?

谢谢

Answer 1

哎呀:对不起大家，我是个白痴。我最近注意到React的组件编译功能和我的一样。

例如，在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工作了!