输入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

您需要/>在末尾用a关闭input元素.

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

Answer 2

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

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

就我而言，它是<br>标签。应该是<br />。

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

Answer 3

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

例子：这个错误：

 <ComponentA> 
    <ComponentB> 

    </ComponentA> 
 </ComponentB> 

正确方法：

  <ComponentA> 
    <ComponentB>

    </ComponentB>  
  </ComponentA>