Question

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

所以我有这个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" />

从JSX转换为React.createElement

1 个答案: