Question

我这里有一个组件可以填充电影的数据：

const MovieList = (props) => {

const movieItems = props.movies.map((movie) => {
  return <MovieListItem key={movie._id} movie={movie} />
});

  return(
    <div className="container">
    <h2 className="latest">MOVIE RESULTS</h2>
    <div className="row">
      { movieItems }
    </div>
    </div>
  );
};

基本上，我打算将我的下一个组件转换为我将movieItems填充到类组件中。这个类有一些帮助函数和一个新函数onClickImgMoreBtn，只要它点击它必须控制日志的东西。但是当我尝试转换它的类组件时它不再起作用了。甚至我的助手班也不会工作。

这是我原来的无状态功能：

import React from 'react';
const helper = require('../../helpers/helper_movies')

const MovieListItem = ({movie}) => {
  return (
<div>
                {helper.mappingComma(movie.genre)}
                {helper.getExcerpt(movie.overview)}
            <button className="btn btn-secondary float-right btn-sm" href={movie._id} onClick={this.onClickImgMoreBtn}>MORE</button>
</div>
);



};

export default MovieListItem;

以下是我如何将其与新功能一起更改：

import React, { Component } from 'react';
const helper = require('../../helpers/helper_movies');

class MovieListItem extends Component{
  constructor(props){
      super(props);
  }

  onClickImgMoreBtn(){
    console.log('hi there!');
   }

  render(){
  return (
<div>
              {helper.mappingComma(this.props.genre)}
              {helper.getExcerpt(this.props.overview)}

            <button className="btn btn-secondary float-right btn-sm" href={this.props._id} onClick={this.onClickImgMoreBtn}>MORE</button>
</div>
);

}

}

export default MovieListItem;

知道我错过了什么吗？我没有正确转换它吗？

Answer 1

在您的无状态组件中，您可以从道具中构建影片并使用movie.genre, movie._id和movie.overview，因此您需要使用该组件 this.props.movie.genre，this.props.movie._id和this.props.movie.overview

render(){
  return (
         <div>
              {helper.mappingComma(this.props.movie.genre)}
              {helper.getExcerpt(this.props.movie.overview)}

            <button className="btn btn-secondary float-right btn-sm" href={this.props.movie._id} onClick={this.onClickImgMoreBtn}>MORE</button>
        </div>
   );
}

或更好，destructure movie form props在渲染

中

render(){
  const { movie } = this.props;
  return (
         <div>
              {helper.mappingComma(movie.genre)}
              {helper.getExcerpt(movie.overview)}

            <button className="btn btn-secondary float-right btn-sm" href={movie._id} onClick={this.onClickImgMoreBtn}>MORE</button>
        </div>
   );
}

此外，由于您没有在构造函数中执行任何操作，因此需要定义构造函数。

将无状态转换为类组件会对js产生反应

1 个答案: