ReactJS - 组件来改变另一个呈现的内容

我正在创建一个reactJS应用程序，它将显示手机列表。我目前正在调用API，将状态设置为响应，然后显示内容。我现在正在寻找添加排序顺序，但有困难。ReactJS - 组件来改变另一个呈现的内容

当用户进入/手机/苹果/ iPhone，路由将呈现以下组件调用API，设置状态，将数据传递到结果组件...

export default class Phones extends Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     data: null, 
     make: this.props.params.make || null, 
     model: this.props.params.model || null 
    }; 
} 

componentDidMount(){ 
    const makeQuery = this.state.make ? this.state.make + '/' : ''; 
    const modelQuery = this.state.model ? this.state.model : ''; 
    const fetchUrl = '/api/phones/' + makeQuery + modelQuery; 

    fetch(fetchUrl, { 
     headers: { 
      Accept: 'application/json' 
     } 
    }).then(response => { 
     if (response.ok) { 
      response.json().then(json=> { 
       this.setState({data: json}); 
      }); 
     } 
    }); 
} 

render() { 
    if (this.state.data) { 
     const currentUrl = this.props.location.pathname; 

     return (
      <section className="phones"> 
       <Filters 
        data={this.state.data} 
        currentUrl={currentUrl} /> 
       <Results 
        data={this.state.data} /> 
      </section> 
     ) 
    } 
} 
}

的结果组件将映射数据并呈现电话列表。

在Filters组件中，我有一个下拉菜单，允许用户按价格值对结果进行排序，这也设置了状态。

export default class Filters extends Component { 
constructor(props){ 
    super(props); 
    this.state = { 
     value: 0 
    } 

    this.onChange = this.onChange.bind(this); 
} 

onChange(e){ 
    this.setState({value: e}) 
} 

render() { 
    return (
     <div> 
      <p>Price</p> 
      <select onChange={this.onChange}> 
       <option value='asc'>low to high</option> 
       <option value='desc'>high to low</option> 
      </select> 
     </div> 
    ); 
} 
}

我遇到的问题是，我不知道我怎么能这个过滤器适用于这使得结果的分量，什么是去了解这一点的最好方法是什么？

我已经开始阅读终极版，但也很困惑，如果手机的数据和过滤器应该是在商店，因为它是暂时的，如果他们去到另一个页面，即/手机将改变/三星/银河/

任何帮助表示赞赏

来源

2017-04-17 Phil

通常在React中，父容器将处理所有子组件的状态 - 数据和道具在一个方向上向下流过组件树。

Redux提供了一种让容器访问更新状态的方法。

This page from the Redux docs提供了有关如何与React集成的说明。

Redux提供了一个包含整个应用程序状态的单个对象。然后，额外的NPM模块react-redux提供了将组件连接到全局Redux状态的两个功能：mapStateToProps和mapDispatchToProps。

使用这种方法，你可以有你的过滤器容器设置全局状态的切换：

state = { 
    phones: [], 
    sortBy: 'price', 
    sortOrder: 'asc', 
}

或同级。然后可以使用mapStateToProps访问排序状态片，并使用mapDispatchToProps来“分派”更新状态的操作。

Redux文档非常出色，并且以简洁和初学者为中心进行编写。

来源

2017-04-17 23:15:07 Toby

那太好了，谢谢你一个伟大的例证。我已经阅读了文档并理解（我认为），对于涉及API的示例尤其有帮助。 – Phil

所以有几种方法可以做到这一点。你提到你刚刚开始考虑Redux，并且我鼓励你继续这个道路。它将在应用程序状态管理领域为您提供很多帮助。这就是说，如果你与这样刚反应过来：

父组件是手机，所以写在Phones一个辅助方法，以保持过滤器的轨道（请确保您设置了默认过滤状态时，组件第一构造或坐骑像你的品牌和型号一样）：

setFilter(filter) { this.setState({filter}); }

妙传Phones组件状态的filter到两个Filters和Results组件。还通过setFilter类方法走进孩子Filters组件（所有这一切都在你的Phones组件的render方法来完成）：

return (
    <section className="phones"> 
     <Filters 
      filter={this.state.filter} 
      onChange={this.setFilter} 
      data={this.state.data} 
      currentUrl={currentUrl} /> 
     <Results 
      data={this.state.data} 
      filter={this.state.filter}/> 
    </section> 
)

更改Filter组件，以便其onChange事件是你传递给它的setFilter处理程序，和value在<select>组件中的prop是我们在（2）中通过的filter。

我会给你留3个。我想你可以弄明白:)。请注意，您现在可以在结果类中以访问过滤器值的方式访问，并且可以在该组件中进行排序。

来源

2017-04-17 23:22:23

我已经开始阅读终极版，但也很困惑，如果手机的数据和过滤器应该是在商店，因为它是暂时的，如果他们去到另一个页面，即/手机将改变/三星/银河/

Redux是解决此问题的绝佳解决方案。通过将状态外化，这两个组件都可以轻松访问必要的值。

您对数据更改的关注不应该如此，因为这是redux商店的一个重要且常见的情况。即使是他们的文档中的todo list example也会实现与您所描述的类似的过滤器组件。

另一个好处是，如果您使用redux-thunk中间件（或任何您想要的异步中间件），您还可以将您的fetch调用移出组件，使其变得更简单一些。

这种设置有很多例子，所以我现在不会为你写任何东西，但我会在评论中更新这个答案。

或者，您可以使用回调在组件之间传递数据。

这从this blog图像有是如何可以做到这一点

来源

2017-04-17 23:24:22

ReactJS - 组件来改变另一个呈现的内容

回答

相关问题