Question

首先是一些背景：我正在尝试为React-Clone设置一个互动的“试试”，这是我在一周前提出的编码挑战。例如，这是我正在处理Create Component

的一个示例

无论如何，当我使用Babel和Webpack或浏览化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（“趋势”，{ex_thing：anObject}）。仅供参考： EX.node 是我用于制作的React-Clone。

在Google驱动器上，我有两个HTML文件，一个名为 works.html ，另一个名为 broken.html ，它需要零设置，只需点击即可在Chrome Two HTML files

中打开

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

如何让Babel将 NameTag 编译为 NameTag（{ex_person：itm}）而不是 EX.node（'NameTag'，{ex_person： itm}）？

谢谢

Answer 1

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

例如，像 Trends 这样的组件反应编译如下：

  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 有效！

如何使用transform-react-jsx获取Babel以正确转换没有module.exports的组件（用于ACE编辑器）？

1 个答案: