比较此.状态与应用样式的函数

Question

我正在使用函数来过滤值。

如果我映射函数filteredMovies，它将删除不适用的类型按钮和电影。

但是，而不是删除它们，而是要进行自定义className。我想将其他style应用于<Filter1>＆amp;<Movies>。正确的方法是什么？

我已经将其放入Codesandbox(https://codesandbox.io/s/76zjoybva(

示例1：

比较this.state.movies

  {this.uniqueGenres1(this.state.movies).map(e => (
    <Filter1
      key={e.id}
    />
  ))}

到filteredMovies

  {this.uniqueGenres1(filteredMovies).map(e => (
    <Filter1
      key={e.id}
    />
  ))}

对于不出现在filteredMovies中的值，请应用其他className

Answer 1

使用反应的 className属性：

class Filter1 extends React.Component {
  handleClick = () => {
    this.props.onChange(this.props.genre.name);
  };
  render() {
    const { genre, isActive } = this.props;
return (
  <button onClick={this.handleClick} className={isActive? 'active' : 'inactive'}>
    {genre.name}
    {' '}
    <strong>{isActive ? 'Active' : 'Inactive'}</strong>
  </button>
);

}}

另外，不要忘记在第二张地图中将"过滤器"更改为"电影"：

         <h3> Using filteredMovies function</h3>
  {this.uniqueGenres1(movies).map(e => (
    <Filter1
      key={e.id}
      genre={e}
      isActive={!!selectedFilters[e.name]}
      value={e.type}
      onChange={this.handleChange}
    />
  ))}

更新：

将CSS样式应用于<li> S而不是隐藏它们，将代码中的相关部分更改为：

class Result extends React.Component {
  render() {
    const { result, isActive } = this.props;
    return (
      <div>
        <li className={isActive? 'active' : 'inactive'}>
          {result.name} {' '}
          ({result.genres.map(x => x.name).join(', ')}){' '}
        </li>
      </div>
    );
  }
}

    {movies.map(movie =>  { 
  var isActive = !!filteredMovies.find(filteredrMovie => filteredrMovie.name === movie.name);      
  return (
      <Result key={movie.id} result={movie} isActive={isActive} />
    )
})}

基本上，它基本上使用JS find函数来知道整个中过滤列表中是否存在电影。然后，它将结果作为道具传递给结果组件。

update2 ：

为了基于您的按钮，它们存在于结果中，而不是它们活跃的情况下，它们存在于此：

：

<h3>Using filteredResults function</h3>
        {this.uniqueGenres(filteredResults).map(genre => {
          const isExisting = !!this.uniqueGenres(allFilters).find(
            genre1 => genre1 === genre,
          );
         return (
          <Filter1
            key={genre.id}
            genre={genre}
            isActive={!!selectedFilters[genre.name]}
            isExisting={isExisting}
            onChange={genre.handleChange}
          />
         )})}

用包含完整列表的变量的正确名称替换" allfilters"。

update3 ：

更改了Filter1组件的代码后，它现在对我有用，因此它将基于" ISEDESTING"的className解决：

class Filter1 extends React.Component {
  handleClick = () => {
    this.props.onChange(this.props.genre);
  };
  render() {
    const { genre, isActive, isExisting } = this.props;
    return (
      <button onClick={this.handleClick} className={isExisting ? 'existing' : 'notExisting'}>
        {genre.name}
        {' '}
        <strong>{isActive ? 'Active' : 'Inactive'}</strong>
      </button>
    );
  }
}