期望输入 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>
);
}
});
193032 次浏览
小开
最佳答案

You need to close the input element with a /> at the end. 

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

This error also happens if you have got the order of your components wrong.

Example: this wrong:

 <ComponentA>
<ComponentB>


</ComponentA>
</ComponentB>

correct way:

  <ComponentA>
<ComponentB>


</ComponentB>
</ComponentA>
小开

You have to close all tags like , etc for this to not show.

小开

It happens when we do not close a html tag.

Make sure all the html tags are closed.

In my case it was the <br> tag. It should be <br />.

Try temporarily removing piece of code until you find which html tag closing is missing.

小开

All tags must have enclosing tags. In my case, the hr and input elements weren't closed properly.

Parent Error was: JSX element 'div' has no corresponding closing tag, due to code below:

<hr class="my-4">
<input
type="password"
id="inputPassword"
class="form-control"
placeholder="Password"
required
>

Fix:

<hr class="my-4"/>
<input
type="password"
id="inputPassword"
class="form-control"
placeholder="Password"
required
/>

The parent elements will show errors due to child element errors. Therefore, start investigating from most inner elements up to the parent ones.

小开

You need to close the input element with /> at the end. In React, we have to close every element. Your code should be:

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

All these answers are valid but I had that issue multiple times today with well closed tags. If it happens to you, just abort and run npm start again.


提交答案