输入 Reactjs 的预期对应 JSX 结束标记答案

【问题标题】：Expected corresponding JSX closing tag for input Reactjs输入 Reactjs 的预期对应 JSX 结束标记
【发布时间】：2015-08-31 09:30:38
【问题描述】：

在 Reactjs 中使用输入字段创建组件时发生错误 Error: Parse Error: Line 47: Expected corresponding JSX closing tag for input at http://localhost/chat-react/src/script.js:47:20 </div>

var Main = React.createClass({
    render: function() {
        return (
            <div className="card-action">
                <i class="mdi-action-account-circle prefix"></i>
                <input id="icon_prefix" type="text" class="validate">
            </div>
        );
    }
});

【问题讨论】：

有时错误来自form，它有非结束输入。

标签： javascript reactjs reactjs-flux react-jsx

【解决方案1】：

您需要在最后用/> 关闭输入元素。

<input id="icon_prefix" type="text" class="validate" />

【讨论】：

我能问一下为什么吗？，（我是这个话题的新手）
@pedro 如果标签为空（没有子元素），这是关闭元素的简写方式，无需创建匹配的关闭元素。所以代替：<div></div>。你可以做<div />。更多信息请看这里：reactjs.org/docs/…
我有一个<br>，这导致了问题（它应该是<br />）。这很奇怪，因为 HTML5 规范建议不要使用前导斜杠作为自闭合标签
@CristianTraìna 重要的是要记住 JSX 不是 HTML。 JSX 是它自己的东西。在幕后，所有内容都转换为React.createElement，这取决于每个元素的关闭，以了解事物的嵌套方式。

【解决方案2】：

当我们不关闭 html 标签时会发生这种情况。

确保所有 html 标记都已关闭。

在我的例子中，它是<br> 标签。应该是<br />。

尝试暂时删除一段代码，直到发现缺少哪个 html 标签结束。

【讨论】：

【解决方案3】：

如果您的组件顺序错误，也会发生此错误。

示例：这个错误：

 <ComponentA> 
    <ComponentB> 

    </ComponentA> 
 </ComponentB>

正确方法：

  <ComponentA> 
    <ComponentB>

    </ComponentB>  
  </ComponentA>

【讨论】：

【解决方案4】：

所有标签都必须有封闭标签。就我而言，hr 和 input 元素没有正确关闭。

父错误是：JSX 元素 'div' 没有相应的结束标记，由于以下代码：

<hr class="my-4">
<input
  type="password"
  id="inputPassword"
  class="form-control"
  placeholder="Password"
  required
 >

修复：

<hr class="my-4"/>
<input
 type="password"
 id="inputPassword"
 class="form-control"
 placeholder="Password"
 required
/>

父元素会因子元素错误而显示错误。因此，开始从大多数内部元素到父元素进行调查。

【讨论】：

【解决方案5】：

您必须关闭所有标签，如，等等才能不显示。

【讨论】：

请解释如何以及为什么解决问题将真正有助于提高您的帖子质量

【解决方案6】：

您需要在最后用/> 关闭输入元素。在 React 中，我们必须关闭每个元素。你的代码应该是：

<input id="whatever-id" type="text" class="validate" />

【讨论】：

我想你最后的意思是class="validate" />而不是class="validate/">

【解决方案7】：

所有这些答案都是有效的，但我今天多次遇到这个问题带有很好的封闭标签。如果发生这种情况，只需中止并再次运行 npm start。

【讨论】：