预期的相应JSX关闭标签是输入Reactjs。

Question

在Reactjs中创建带有输入框的组件时出现错误 Error: 解析错误：第47行：期望与输入标记对应的JSX关闭标记，位于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>
        );
    }
});

- Sajin M Aboobakkar

---

有时错误来自于具有无限输入的“表单”。 - Asef Hossini

Answer 1

您需要在输入元素的结尾处使用/>来关闭它。

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

- Crob

---

当我问“为什么？”时，您能告诉我原因吗？（我对这个话题不太熟悉） - Pedro

如果一个标签是空的（没有子元素），那么这是一种不必创建匹配的闭合元素就能关闭该元素的快捷方式。因此，代替 <div></div>，你可以使用 <div /> 来表示相同的意思。更多信息请查看：https://reactjs.org/docs/introducing-jsx.html#specifying-children-with-jsx - Jose Browne

我遇到了一个<br>标签，这导致了问题（它期望的是<br />标签）。这很奇怪，因为HTML5规范建议不要在自闭合标签中使用前斜杠。 - Christian Vincenzo Traina

记住 JSX 不是 HTML，它是一种独立的东西。幕后所有 JSX 元素都会被转换成 React.createElement，元素的开闭标签决定了它们之间的嵌套关系。 - Crob

Answer 2

当我们没有关闭一个html标签时就会出现这种情况。

确保所有的html标签都已经关闭。

在我的情况中，是<br>标签。应该改为<br />。

尝试暂时移除一些代码，直到找到缺少闭合标签的位置。

- Yuvraj Patil

Answer 3

如果组件的顺序错误，也会出现此错误。

例如：以下是错误的：

 <ComponentA> 
    <ComponentB> 

    </ComponentA> 
 </ComponentB> 

正确的方式：

  <ComponentA> 
    <ComponentB>

    </ComponentB>  
  </ComponentA> 

- Deke

Answer 4

您需要在输入元素的结尾处使用 /> 来关闭它。在React中，我们必须关闭每个元素。您的代码应该是：

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

- Jamal Sheikh Ali

---

我认为你在结尾处应该是想要使用 class="validate" /> 而不是 class="validate/">。 - Ecks Dee

Answer 5

所有标签必须有相应的封闭标签。在我的情况下，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
/>

由于子元素的错误，父级元素也会显示出错。因此，请从最内部的元素开始逐层检查，直到到达父级元素。

- EugenSunic

Answer 6

注意以下内容：

<h1>aergawergerg</h1>
<h1>aergawergerg<h1/>

初学者错误。

- bitbang

Answer 7

你必须关闭所有标签，如，

等等，这样才不会显示。

- gaurav rathor

---

请提供解释说明如何以及为什么这样做可以解决问题，这将有助于提高您的帖子质量。 - Android

Answer 8

所有这些答案都是有效的，但我今天遇到了多次这个问题即使标签已经正确闭合。如果发生这种情况，请中止并再次运行npm start。

- sleepydrmike