在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>
);
}
});
答案 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/">