两个组件进行通信

作者

我刚开始使用ReactJS，有点被我遇到的一个问题所困扰

我的应用程序本质上是一个带有过滤器的列表和一个用来更改布局的按钮。
目前，我正在使用三个组件：&lt；列表/&gt，&lt；过滤器/&gt和&lt；TopBar/&gt，现在很明显，当我在中更改设置时&lt；过滤器/&gt我想在中触发一些方法&lt；列表/&gt以更新我的视图

我如何使这三个组件相互交互，或者我需要某种全局数据模型，在那里我可以对它们进行更改

最佳方法取决于您计划如何安排这些组件。现在想到的几个示例场景：

  1. &lt；过滤器/&gt是的子组件&lt；列表/&gt
  2. 都&lt；过滤器/&gt和&lt；列表/&gt是父组件的子级
  3. &lt；过滤器/&gt和&lt；列表/&gt完全位于单独的根组件中

可能还有其他我没有想到的情况。如果你的不适合这些，请告诉我。以下是我如何处理前两个场景的一些非常粗略的示例：

情景1

您可以从传递处理程序&lt；列表/&gt至&lt；过滤器/&gt，然后可以在onChange事件上调用它以使用当前值筛选列表

JSFiddle for#1→

/**@jsx React.DOM*/
var Filters=React.createClass({
handleFilterChange:函数（）{
var value=this.refs.filterInput.getDOMNode（）.value；
this.props.updateFilter（值）；
},
render:function（）{
返回&lt；input type=&quot；text&quot；ref=&quot；filterInput&quot；onChange={this.handleFilterChange}占位符=&quot；Filter&quot；/&gt；；
}
});
var List=React.createClass({
getInitialState:函数（）{
返回{
清单项目：[“芝加哥”、“纽约”、“东京”、“伦敦”、“旧金山”、“阿姆斯特丹”、“香港”]，
名称筛选器：“”
};
},
handleFilterUpdate:函数（filterValue）{
这是我的国家({
nameFilter:filterValue
});
},
render:function（）{
var displayedItems=this.state.listItems.filter（函数（项）{
var match=item.toLowerCase（）.indexOf（this.state.nameFilter.toLowerCase（））；
返回（匹配！=-1）；
}.约束（这个）；
var含量；
如果（displayedItems.length&gt；0）{
var items=displayedItems.map（函数（项）{
返回&lt；li&gt；{item}&lt；/li&gt；；
});
内容=&lt；ul&gt；{items}&lt；/ul&gt；
}否则{
内容=&lt；p&gt；没有与此筛选器匹配的项目&lt；/p&gt；；
}
返回(
&lt；div&gt；
&lt；Filters updateFilter={this.handleFilterUpdate}/&gt；
&lt；h4&gt；结果&lt；/h4&gt；
{content}
&lt；/div&gt；
);
}
});
React.renderComponent（&lt；List/&gt；，document.body）；

情景2

与场景#1类似，但父组件将是将处理程序函数传递给&lt；过滤器/&gt，并将过滤后的列表传递给&lt；列表/&gt。我更喜欢这种方法，因为它将解耦&lt；列表/&gt</来自的code>&lt；过滤器/&gt

JSFiddle for#2→

/**@jsx React.DOM*/
var Filters=React.createClass({
handleFilterChange:函数（）{
var value=this.refs.filterInput.getDOMNode（）.value；
this.props.updateFilter（值）；
},
render:function（）{
返回&lt；input type=&quot；text&quot；ref=&quot；filterInput&quot；onChange={this.handleFilterChange}占位符=&quot；Filter&quot；/&gt；；
}
});
var List=React.createClass({
render:function（）{
var含量；
如果（this.props.items.length&gt；0）{
var items=this.props.items.map（函数（项）{
返回&lt；li&gt；{item}&lt；/li&gt；；
});
内容=&lt；ul&gt；{items}&lt；/ul&gt；
}否则{
内容=&lt；p&gt；没有与此筛选器匹配的项目&lt；/p&gt；；
}
返回(
&lt；div className=“结果”gt；
&lt；h4&gt；结果&lt；/h4&gt；
{content}
&lt；/div&gt；
);
}
});
var ListContainer=React.createClass({
getInitialState:函数（）{
返回{
清单项目：[“芝加哥”、“纽约”、“东京”、“伦敦”、“旧金山”、“阿姆斯特丹”、“香港”]，
名称筛选器：“”
};
},
handleFilterUpdate:函数（filterValue）{
这是我的国家({
nameFilter:filterValue
});
},
render:function（）{
var displayedItems=this.state.listItems.filter（函数（项）{
var match=item.toLowerCase（）.indexOf（this.state.nameFilter.toLowerCase（））；
返回（匹配！=-1）；
}.约束（这个）；
返回(
&lt；div&gt；
&lt；Filters updateFilter={this.handleFilterUpdate}/&gt；
&lt；列表项={displayedItems}/&gt；
&lt；/div&gt；
);
}
});
React.renderComponent（&lt；ListContainer/&gt；，document.body）；

情景3

当组件无法在任何类型的父子关系之间通信时，文档建议设置全局事件系统

相关文章：

  1. 使用React路由器以编程方式导航
  2. 您是否可以在不调用setState的情况下强制React组件重新加载？
  3. 未捕获错误：不变冲突：元素类型无效：应为字符串（用于内置组件）或类/函数，但得到：对象
  4. 使用es6类时，React中的“super（）”和“super（props）”有什么区别？

发表评论

© 2026 开发百科-程序代码问答平台 • Built with