大佬教程收集整理的这篇文章主要介绍了ReactJS两个组件进行通信，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
最佳方法取决于您计划如何安排这些组件。现在想到的一些示例场景：
<Filters />@H_607_7@ 是的子组件 <List />@H_607_7@
<Filters />@H_607_7@和<List />@H_607_7@是一个父组件的孩子<Filters />@H_607_7@并<List />@H_607_7@完全存在于单独的根组件中。可能还有其他我没有想到的情况。如果您的不适合这些，请告诉我。以下是一些我如何处理前两种情况的非常粗糙的示例：
您可以将处理程序从传递<List />@H_607_7@给<Filters />@H_607_7@，然后可以在onChange@H_607_7@事件上调用该处理函数以使用当前值过滤列表。
＃1的JSFiddle→
@H_696_38@/** @Jsx React.DOM */
var Filters = React.createClass({
handleFilterChange: function() {
var value = this.refs.filterinput.getDOMNode().value;
this.props.updatefilter(value);
},
render: function() {
return <input type="text" ref="filterinput" onChange={this.handleFilterChangE} placeholder="Filter" />;
}
});
var List = React.createClass({
geTinitialState: function() {
return {
ListItems: ['Chicago', 'New York', 'Tokyo', 'London', 'San Francisco', 'Amsterdam', 'Hong Kong'],
nameFilter: ''
};
},
handleFilterupdate: function(filtervalue) {
this.setState({
nameFilter: filterValue
});
},
render: function() {
var displayeditems = this.state.ListItems.filter(function(item) {
var match = item.tolowerCase().indexOf(this.state.nameFilter.tolowerCase());
return (match !== -1);
}.bind(this));
var content;
if (displayeditems.length > 0) {
var items = displayeditems.map(function(item) {
return <li>{item}</li>;
});
content = <ul>{items}</ul>
} else {
content = <p>No items matching this filter</p>;
}
return (
<div>
<Filters updatefilter={this.handleFilterupdatE} />
<h4>Results</h4>
{Content}
</div>
);
}
});
React.renderComponent(<List />, document.body);
@H_607_7@
场景2
与方案1类似，但父组件将是将处理程序函数传递给的组件<Filters />@H_607_7@，并将过滤后的列表传递给<List
/>@H_607_7@。我更喜欢这种方法，因为它使<List />@H_607_7@脱离了<Filters />@H_607_7@。
＃2的JSFiddle→
@H_696_38@/** @Jsx React.DOM */
var Filters = React.createClass({
handleFilterChange: function() {
var value = this.refs.filterinput.getDOMNode().value;
this.props.updatefilter(value);
},
render: function() {
return <input type="text" ref="filterinput" onChange={this.handleFilterChangE} placeholder="Filter" />;
}
});
var List = React.createClass({
render: function() {
var content;
if (this.props.items.length > 0) {
var items = this.props.items.map(function(item) {
return <li>{item}</li>;
});
content = <ul>{items}</ul>
} else {
content = <p>No items matching this filter</p>;
}
return (
<div classname="results">
<h4>Results</h4>
{Content}
</div>
);
}
});
var ListContainer = React.createClass({
geTinitialState: function() {
return {
ListItems: ['Chicago', 'New York', 'Tokyo', 'London', 'San Francisco', 'Amsterdam', 'Hong Kong'],
nameFilter: ''
};
},
handleFilterupdate: function(filtervalue) {
this.setState({
nameFilter: filterValue
});
},
render: function() {
var displayeditems = this.state.ListItems.filter(function(item) {
var match = item.tolowerCase().indexOf(this.state.nameFilter.tolowerCase());
return (match !== -1);
}.bind(this));
return (
<div>
<Filters updatefilter={this.handleFilterupdatE} />
<List items={displayeditems} />
</div>
);
}
});
React.renderComponent(<ListContainer />, document.body);
@H_607_7@
场景3
当组件无法在任何类型的父子关系之间进行通信时，文档建议设置全局事件系统。
解决方法
大佬总结
以上是大佬教程为你收集整理的ReactJS两个组件进行通信全部内容，希望文章能够帮你解决ReactJS两个组件进行通信所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。