Question

我想在Ramda函数中使用哪些值处于“state”状态。这类似于“AND”过滤器。因此它可能会收到1个值或多个值。

如何将组件中的数据传递给此ramda函数？

如何在'ramda'上循环添加值，因为它们在状态中设置？

我还将它添加到了一个codepen：https://codesandbox.io/s/3OGK2pP9

const AndFilter = pipe(
  prop('movies'),
  filter(
    both(
   // Example data to show how it should arrive from the react component.
      where({ genres: pipe(pluck('name'), contains('foo')) }),
      where({ genres: pipe(pluck('name'), contains('bar')) }),
      where({ genres: pipe(pluck('name'), contains('baz')) }),
    ),
  ),
);

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      movies: dataTest,
      selectedFilters: { foo, bar, baz },
    };
  }
  AndFilter = () => {
    this.setState({ movies: AndFilter(x) });
  };
  render() {
    return (
      <div>
        <button onClick={this.AndFilter}>test</button>
        {this.state.movies.map(movies => (
          <li key={movies.id}> {movies.name} </li>
        ))}
      </div>
    );
  }
}

Answer 1

这可能是愚蠢的答案，但为什么不将你的函数的引用传递给组件道具，如下所示：

constructor(props) {
    super(props);
    this.AndFilter=this.AndFilter.bind(this); 
    this.state = {
      movies: [{"name":"foo"}, {"name":"bar"},{"name":"baz"}],
      selectedFilters: {},
    };
  }

AndFilter(){
  this.setState({movies:this.props.AndFilter(this.state)});
}
____________________
let props={
   AndFilter:AndFilter,
   ....
}

<MyComponent {...props}>

修改

抱歉，我没有看到你的功能我想到了如何将它传递给组件，你可能意味着：

const AndFilter = pipe( prop('movies'), filter( allPass( [propEq('name','foo')] ) ), );

或者像这样（比较函数的比较器数组）：

const AndFilter = curry( (comparators) => pipe( prop('movies'), filter( allPass( comparators ) ), ) );

你可以在你的组件中生成比较器，我也忘了设置监听器，看这里https://codesandbox.io/s/pO8yWXM2，当你点击div时它会过滤所有人，除了那些传递谓词的人。

使用Ramda传递带React的数组

1 个答案: