我是React的初学者,我尝试从FreeCodeCamp做一个“Camper Leader Board”项目. 在StackOverflow代码片段中,它抛出了我: `“message”:“SyntaxError:内联Babel脚本:预期的相应JSX结束标记 请帮我找出问
在StackOverflow代码片段中,它抛出了我:
`“message”:“SyntaxError:内联Babel脚本:预期的相应JSX结束标记
请帮我找出问题所在.这是代码:
"use strict";
class TableBox extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
};
}
loadCampersFromServer() {
fetch('https://fcctop100.herokuapp.com/api/fccusers/top/alltime')//alltime or recent
.then(
(response) => {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ${response.status}');
return;
}
response.json().then((data) => {
console.log('getting data:', data);
this.setState({data: data});
})
}
)
.catch(function (err) {
console.log('Fetch Error :-S', err);
});
}
componentDidMount() {
this.loadCampersFromServer();
}
render() {
return <CampersList />;
}
}
class CampersList extends React.Component {
constructor(props) {
super(props);
}
render() {
console.log(this.state);
let campersNodes = this.state.data.map((element, index) => {
return (
<Camper user={element} index={index} />
);
});
return (
<table>
<tr>
<th>#</th>
<th>Camper Name</th>
<th>Points in past 30 days</th>
<th>All time points </th>
</tr>
{campersNodes}
</table>
)
}
}
class Camper extends React.Component{
constructor(props){
super(props);
}
render(){
<tr>
<td>{this.props.index}</td>
<td>
<img src = {this.props.user.img} alt="logo">
{this.props.user.userName}
</td>
<td>{this.props.user.recent}</td>
<td>{this.props.user.alltime}</td>
</tr>
}
}
ReactDOM.render(<TableBox />, document.getElementById('root'));
<script src="http://img.558idc.com/uploadfile/allimg/210615/1Q00544D-0.jpg"></script> <script src="http://img.558idc.com/uploadfile/allimg/210615/1Q005GV-1.jpg"></script> <div id="root"></div>您需要使用结束/>关闭您的img标记:
<img src={this.props.user.img} alt="logo" />
在正确关闭标签时,JSX并不像HTML那么宽松.
