从 JSX 转换为 React.createElement

Question

我是使用反应的新手，我想从JSX转换为仅反应语言。

所以我有这个 JSX：

<div class="films" key={data.id}>{data.title} {data.releaseYear}</div>

我尝试转换：

React.createElement('div', { className: "films", id: data.id }, { data.title } );

但我没有成功。任何想法如何纠正它？

我的完整代码：

class App extends React.Component {
constructor(props) {
super(props)
this.state = { movies: [] }
}

async componentDidMount() {
await axios.get('movies.json')
.then(response => this.setState({ movies: response.data.movies }))
}
renderUsers() {
const { movies } = this.state
return movies.map( data => (
<div class="films" key={data.id}>{data.title} {data.releaseYear}</div>
))
}
render() {
return React.createElement('div', null, this.renderUsers());
}
}
ReactDOM.render(
<App />,
document.getElementById('container')
)

Answer 1

你只需要将最后一个参数作为字符串传递给 React.createElement，因为没有更多的嵌套级别子级

renderUsers() {
const { movies } = this.state
return movies.map( data => React.createElement('div', {className: 'films', key: data.id}, 
`${data.title} ${data.releaseYear}`
))
}

class App extends React.Component {
constructor(props) {
super(props)
this.state = { movies: [] }
}
componentDidMount() {
setTimeout(() => {
this.setState({
movies: [{id: 1, title: 'Shutter Island', releaseYear: '2010'}, {id: 2, title: 'Jane Tu ya Jaane na', releaseYear: '2011'}]
})
})

}
renderUsers() {
const { movies } = this.state
return movies.map( data => React.createElement('div', {className: 'films', key: data.id}, 
`${data.title} ${data.releaseYear}`
))
}
render() {
return React.createElement('div', null, this.renderUsers());
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app" />