javascript-输入Reactjs的预期对应JSX结束标记

在具有输入字段的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>
        );
    }
});
5个解决方案
81 votes

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

<input id="icon_prefix" type="text" class="validate" />
Crob answered 2020-07-08T09:42:52Z
2 votes

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

示例:这是错误的:

 <ComponentA> 
    <ComponentB> 

    </ComponentA> 
 </ComponentB> 

正确方法:

  <ComponentA> 
    <ComponentB>

    </ComponentB>  
  </ComponentA> 
Deke answered 2020-07-08T09:43:20Z
0 votes

您必须关闭所有标签,例如,这样才能不显示。

gaurav rathor answered 2020-07-08T09:43:40Z
0 votes

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

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

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

尝试暂时删除一段代码,直到发现缺少哪个html标签关闭。

Yuvraj Patil answered 2020-07-08T09:44:13Z
0 votes

所有标签必须带有封闭标签。 就我而言,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
/>

由于子元素错误,父元素将显示错误。 因此,开始调查大多数内部元素,直到父元素。

Eugene Sunic answered 2020-07-08T09:44:46Z
translate from https://stackoverflow.com:/questions/30852751/expected-corresponding-jsx-closing-tag-for-input-reactjs