输入 Reactjs 的预期相应 JSX 结束标记

Question

在 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>
        );
    }
});

Answer 1

您需要在末尾使用 /> 关闭输入元素。

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

Answer 2

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

示例：这个错误：

 <ComponentA> 
    <ComponentB> 

    </ComponentA> 
 </ComponentB>

正确方法：

  <ComponentA> 
    <ComponentB>

    </ComponentB>  
  </ComponentA>

Answer 3

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

Answer 4

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

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

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

尝试暂时删除一段代码，直到找到缺少 html 结束标记。

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
/>

父元素会因子元素错误而显示错误。因此，从最内部元素开始调查到父元素。

Answer 6

您需要在末尾关闭带有 /> 的输入元素。在 React 中，我们必须关闭每个元素。您的代码应该是：

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

Answer 7

所有这些答案都是有效的，但我今天多次遇到这个问题关闭标签。如果它发生在你身上，只需中止并再次运行 npm start。

输入 Reactjs 的预期相应 JSX 结束标记

Expected corresponding JSX closing tag for input Reactjs

javascript

reactjs

reactjs-flux

react-jsx