如果像 <br> 这样的自关闭标签没有关闭，JSX 中是否有一个 API 可以忽略？

Question

我正在使用 JSX 创建一个简单的 ReactJS 组件，如下所示。

<script type="text/jsx">
        var HelloWorld = React.createClass({
            render: function() {
                return (

                    <div class="ui left icon input">
                        <input placeholder="Search users..." type="text" />
                          <i class="users icon"></i>
                    </div>

                    );
            }
        });
        React.render(<HelloWorld />, document.body);
    </script>

如果我关闭输入标签，上面的代码工作正常<input placeholder="Search users..." type="text" />。如果我不关闭标签<input placeholder="Search users..." type="text">，JSX 会抛出这个错误并且 React/JSX 组件不会被渲染：

我有一些遗留代码，其中没有关闭诸如<input >, 之<br>类的标签。根据 W3C，关闭这些标签也不是强制性的。我想使用 JSX 将此代码移动到 React 组件。但是我希望 JSX 忽略自关闭/无效标签是否关闭。

有没有 api 或方法来配置 JSX 来忽略这个？

Answer 1

您必须关闭所有 JSX 标签。JSX 被转换成函数调用，而不是编译成 HTML。如果有帮助，您可以更像 XHTML 来考虑它。