Question

我还没有在几个月内使用React，今晚我试图编写jsx，由babel根据these directions自动编译为jsx。

我有两个这样的文件：

Parent.jsx

<TileContainer id="container" tileDelete="handleTileDelete" tiles="{/TileCollection}">
            <StandardTile 
                icon = "sap-icon://{icon}"      
                type = "Monitor"
                press = "FunctionPress"
                title = "{title}" />
        </TileContainer>

和

Child.jsx

var Parent = React.createClass({
  render: function() {
    return (<Child></Child>);
  }
});

我正在使用babel监视文件的更改并在需要时输出新的js文件，它总是将Child组件呈现为var Child= React.createClass({ render: function() { return (<span>CHILD</span>); } });，而不是像我期望的那样呈现React.createElement("Child", null)。

我对babel和节点一般是新手，并且无法找到让jsx变换按预期工作的方法。有什么我想念的吗？我觉得这种模式曾经起作用，但我以前从未尝试过像babel这样的东西。

Answer 1

这使我永远感到不解，但事实证明，您可以只从HTML加载所有文件，然后将它们嵌套。

HTML：

<html lang="en">
<head>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
</head>

<body>
    <div id="root"></div>
    <div id="test"></div>
</body>

<script src="./Test3a.jsx" type="text/babel"></script>
<script src="./Test3b.jsx" type="text/babel"></script>
<script type="text/babel">
    ReactDOM.render(<Ostrich />, document.getElementById("root"));
</script>
<script type="text/babel">
    ReactDOM.render(<Monkey />, document.getElementById("test"));
</script>

Test3A.jsx：

window.Ostrich = function() {
    return (
        <div>
            Ostriches
        </div>
    );
}

window.Monkey = function（）{ 返回（）; }

Test3A.jsx：

window.MoreMonkeys = function() {
    return (
        <div>
            That's a lot of Monkeys.
        </div>
    );
}

这是针对非webpack的“ React JS”，或更确切地说是针对“不含” ReactJS的Babel / JSX。这可能不是一个完美的解决方案，但希望能有所帮助。

如何使用babel在单独的jsx文件中转换嵌套组件？

1 个答案: