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 只应该用在顶层组件,不是用来向上传值的。