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

时间:2015-06-15 18:45:37

标签: javascript reactjs reactjs-flux react-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>
        );
    }
});

6 个答案:

答案 0 :(得分:73)

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

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

答案 1 :(得分:1)

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

示例:这是错误的:

 <ComponentA> 
    <ComponentB> 

    </ComponentA> 
 </ComponentB> 

正确方法:

  <ComponentA> 
    <ComponentB>

    </ComponentB>  
  </ComponentA> 

答案 2 :(得分:0)

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

答案 3 :(得分:0)

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

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

在我的情况下,它是<br>标签。应该是<br />

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

答案 4 :(得分:0)

所有标签必须带有封闭标签。就我而言, 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 :(得分:0)

您需要以/>结尾关闭输入元素。在React中,我们必须关闭每个元素。您的代码应为:

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