javascript - react 组件props和state的问题

问题描述

问 题

现在我这边有个想法，但是之前没有具体的做过，所以不知道是否可行。举个例子：

// 这是一个父组件
<Father />

// 这是一个子组件
<Son />

父组件里面可能包含多个被复用的子组件。父组件负责到server端拿数据，子组件负责渲染父组件拿到的数据。这都很正常。
现在有一个需求，需要让子组件有一个过滤的功能。最简单的例子就是一个列表页，根据不同的过滤方式展现不同的数据。举个例子，‘选择10号-12号的所有数据并展示’。如果将数据的操作放到父组件去做，那么父组件会变得非常的臃肿，因为子组件会被引用多次。
我的设想是，把数据放到子组件的state上，让子组件自己去管理，从而导致子组件的re-render。不过我没有确实的做过这种功能的划分，所以想来问下各位大神，我的设想是否可行？以后会不会存在什么局限？

看了下好像有些人还不太明白我的意思，我贴个图吧

根据筛选，展示不同的数据

解决方案

可以把父组件作为单纯的数据获取组件，然后子组件中写过滤的事件函数，只要子组件的setState就能触发re-render的；至于渲染的数据，可以直接用父组件的数据，然后在render中做filter，用filter之后的数据去渲染。

这篇关于javascript - react 组件props和state的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！