javascript - 将 this.state 与函数进行比较以应用样式

Question

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

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

但是，我不想删除它们，而是想要自定义 className 。我想申请不同的 style至<Filter1> & <Movies> 。正确的做法是什么？

我已将其放入代码沙箱 ( 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 React 的属性:

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>
);

}}

另外，不要忘记将第二张 map 中的“filteredMovies”更改为“movies”:

         <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>不要隐藏它们，而是将代码中的相关部分更改为以下内容:

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函数来了解过滤列表中的电影是否存在于整个列表中。然后它将结果作为 prop 传递给 Result 组件。

更新2:

为了根据结果中是否存在按钮而不是它们是否处于事件状态来设计按钮的样式:

<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”替换为包含完整列表的变量的正确名称。

更新3:

更改 Filter1 组件的代码后，它现在对我有用，因此它将根据“isExisting”解析 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>
    );
  }
}