84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
父组件我知道的有 props,但是只可以一级一级往下传,或者用context,或者用redux
那么子组件直接往上多级传递数据呢?一级一级用回调或者ref感觉太烦琐了,而redux用起来个人感觉也不是那么便捷,是否有类似context这样能直接传递多级数据的方法?
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...
redux我也觉得太冗余,所以知道了mobx,用起来真是酸爽
父组件通过props传函数给子,子调用函数传参回调
可以使用事件订阅这样的东西:
var events = (function(){ var topics = {}; var hOP = topics.hasOwnProperty; return { subscribe: function(topic, listener) { // Create the topic's object if not yet created if(!hOP.call(topics, topic)) topics[topic] = []; // Add the listener to queue var index = topics[topic].push(listener) - 1; // Provide handle back for removal of topic return { remove: function() { delete topics[topic][index]; } }; }, publish: function(topic, info) { // If the topic doesn't exist, or there's no listeners in queue, just leave if(!hOP.call(topics, topic)) return; // Cycle through topics queue, fire! topics[topic].forEach(function(item) { item(info != undefined ? info : {}); }); } }; })(); // 父组件 class F extends React.Component { constructor(props) { super(props); events.subscribe('my', obj => { console.log('sub', obj); }); } render() { return ( <div> <C /> </div> ); } } // 子组件 class C extends React.Component { constructor(props) { super(props); } componentDidMount() { events.publish('my', { url: 'msg' }); setTimeout(() => { events.publish('my', { url: 'new msg' }); }, 1000); } render() { return ( <div>ccc</div> ); } } ReactDOM.render( <F />, document.getElementById('app') );
不过建议用 redux
redux的一个作用就是在于在多个不相邻组件之间传值,redux并非不便捷,只是使用redux需要思维方式有一点点转变。习惯后,你会觉得特别好(PS:通过ref往上传值,貌似并非好的React使用模式)。
就是一级级向上传,it's just how React works.Redux 只应该用在顶层组件,不是用来向上传值的。
redux我也觉得太冗余,所以知道了mobx,用起来真是酸爽
父组件通过props传函数给子,子调用函数传参回调
可以使用事件订阅这样的东西:
不过建议用 redux
redux的一个作用就是在于在多个不相邻组件之间传值,redux并非不便捷,只是使用redux需要思维方式有一点点转变。习惯后,你会觉得特别好(PS:通过ref往上传值,貌似并非好的React使用模式)。
就是一级级向上传,it's just how React works.Redux 只应该用在顶层组件,不是用来向上传值的。