使用Ramda传递阵列与React

Question

我想使用哪些值处于Ramda函数内的“状态”。这将起到类似于“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上它会过滤除了通过谓词的人之外的所有人。