- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在开发一个 React 组件库,它允许通过传递对象数组和 <input/>
来进行客户端数据过滤。作为 <SearchFilter/>
的 Prop 成分。我想将过滤后的结果返回到单独的 <SearchResults/>
可以在树中的其他位置呈现的组件(即结果组件不必是输入组件的子组件)。
我已经弄清楚了过滤,但我不确定在 React 中将过滤后的数据获取到 <SearchResults/>
的最佳路线组件。
这就是我想要的结果......
<SearchFilter
data={data}
input={<input type="text" value={value} onChange={this.handleChange}/>}
/>
然后,使用 Render Props 返回数据并映射该数据以返回 JSX,就会有结果组件。像这样的事情...
<SearchResults
render={data => (
data.map(el => (
<div>
<span>{data.someProperty}</span>
</div>
)
)}
/>
这就是我想要实现的目标,因为我想允许渲染 <SearchFilter/>
组件位于树中的一处,并允许 <SearchResults/>
组件在其他地方渲染,这样树的组成方式以及 View 的渲染方式就有最大的灵 active 。
我已经研究了 Context API,但似乎这需要更多组件才能成为我的库的一部分,这使我想要实现的目标进一步复杂化。如果这是唯一的解决办法,那很好,但我想问问是否有人能想到其他解决方案。
谢谢!
最佳答案
更大的问题是,您将需要管理在更高级别的组件之间共享的状态,即最终将包装这两个组件的任何组件。使用普通的 React,此状态将由父(或祖先)组件管理,并将相关值作为 props 传递下来。这与让兄弟组件影响彼此状态的想法(通常是糟糕的)相反,因为你很容易陷入“谁是这里的老大”的问题。
Context API 处理的事情是不必为通常不会改变的事情传递 props(或者:通常不应该导致渲染经常触发)。
全局状态存储(例如 Redux)可以帮助您对此进行建模,但本质上它只不过是管理状态的“一个”组件,以及根据该状态呈现的其他组件。下层组件中的事件会触发数据的变化,从而导致状态发生变化,从而导致子组件的 props 发生变化,从而导致重新渲染。
我建议您尝试使用这个简单的模式:
class Search ... {
state = {data: [], text: ""}
render() {
return (
<div>
<SearchFilter
data={this.state.data}
onSearch={() => this.fetchNewData()}
onChange={(e) => this.setState({text: e.targetElement.value})}
text={this.state.text}
/>
<SearchResults data={this.state.data} />
</div>
);
}
fetchNewData() {
fetch('/url?text=' + this.state.text)
.then((newData) => { this.setState({data: newData}); })
}
}
大致上是这样的。如果您在建模此类内容时遇到困难,您可以使用 Redux 强制您以类似的方式进行操作,并避免管理本地状态与全局状态的混合(这通常是难以管理的事情)。
如果你做得正确,没有状态的组件(即不负责管理状态,因此没有事件处理程序)都可以成为纯组件,即无状态组件,即基于 props 返回 JSX 的函数:
const SearchResults = ({data}) => <div>{data.map( () => <etc /> )}</div>
关于javascript - 在没有关系的 React 组件之间共享数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52173330/
下面的说法正确吗? “人最好的 friend 是狗。” public class Mann { private BestFriend dog; //etc } 最佳答案 我想说这样
我一直在 documentation 中查看 Laravel 4 中的关系我正在尝试解决以下问题。 我的数据库中有一个名为“事件”的表。该表具有各种字段,主要包含与其他表相关的 ID。例如,我有一个“
我的表具有如下关系: 我有相互链接的级联下拉框,即当您选择国家/地区时,该国家/地区下的区域将加载到区域下拉列表中。但现在我想将下拉菜单更改为基于 Ajax 的自动完成文本框。 我的问题是,我应该有多
我正在尝试弄清楚如何构建这个数据库。我之前用过Apple的核心数据就好了,现在我只是在做一个需要MySQL的不同项目。我是 MySQL 的新手,所以请放轻松。 :) 对于这个例子,假设我有三个表,Us
MongoDB 的关系表示多个文档之间在逻辑上的相互联系。 文档间可以通过嵌入和引用来建立联系。 MongoDB 中的关系可以是: 1:1 (1对1) 1: N (1对多)
您能解释一下 SQL 中“范围”和“分配单元”之间的区别或关系吗? 最佳答案 分配单元基本上只是一组页面。它可以很小(一页)或很大(很多页)。它在 sys.allocation_units 中有一个元
我有一个表 geoLocations,其中包含两列纬度和经度。还有第二个表(让我们将其命名为城市),其中包含每对唯一的纬度和经度对应的城市。 如何使用 PowerPivot 为这种关系建模?创建两个单
我想用 SQLDelight 建模关系,尤其是 一对多关系。 我有 2 张 table :recipe和 ingredient .为简单起见,它们看起来像这样: CREATE TABLE recipe
我是 Neo4J 新手,我有一个带有源和目标 IP 的简单 CSV。我想在具有相同标签的节点之间创建关系。 类似于... source_ip >> ALERTS >> dest_ip,或者相反。 "d
我正在创建一个类图,但我想知道下面显示的两个类之间是否会有任何关联 - 据我了解,对于关联,ClassA 必须有一个 ClassB 的实例,在这种情况下没有但是,它确实需要知道 ClassB 的一个变
是否可以显示其他属性,即“hasTopping”等? 如何在 OWLViz 中做到这一点? 最佳答案 OWLViz 仅 显示类层次结构(断言和推断的类层次结构)。仅使用“is-a”关系进行描述。 OW
public class MainClass { ArrayList mans = new ArrayList(); // I'm filling in this arraylist,
我想知道“多对二”的关系。 child 可以与两个 parent 中的任何一个联系,但不能同时与两个 parent 联系。有什么办法可以加强这一点吗?我也想防止 child 重复条目。 一个真实的例子
我有一个已经创建的Grails插件,旨在支持许多应用程序。该插件具有一个Employee域对象。问题在于,当在主应用程序中使用该应用程序中的域对象时,需要将其引用回Employee对象。因此,我的主应
我有一个类(class)表、类(class)hasMany部分和部分hasMany讲座以及讲座hasMany评论。如果我有评论 ID 并且想知道其类(class)名称,我应该如何在 LectureCo
我有一个模型团队,包含 ID 和名称。所有可能的团队都会被存储。 我的模型游戏有两列 team_1 和 team_2..我需要哪种关系? 我已经测试了很多,但它只适用于一列.. 最佳答案 也许你可以试
我读了很多关于 ICE 或 Corba 等技术中使用的仆人和对象的文章。有很多资源我可以读到这样的东西: 一个仆人可以处理多个对象(为了节省资源)。 一个对象可以由多个仆人处理(为了可靠性)。 有人可
嗨, 我有一个令人沮丧的问题,我在这方面有点生疏。我有两个这样的类(class): class A{ int i; String j ; //Getters and setters} class B
class Employee { private String name; void setName(String n) { name = n; } String getNam
如果您有这样的关系: 员工与其主管员工之间存在多对一关系 员工与其部门的多对一关系 部门与其经理一对一 我会在 Employee 实体中写入: @ManyToOne (cascade=CascadeT
我是一名优秀的程序员,十分优秀!