问题描述
父组件我知道的有 props,但是只可以一级一级往下传，或者用context，或者用redux
那么子组件直接往上多级传递数据呢？一级一级用回调或者ref感觉太烦琐了，而redux用起来个人感觉也不是那么便捷，是否有类似context这样能直接传递多级数据的方法？
问题解答
回答1：redux我也觉得太冗余，所以知道了mobx，用起来真是酸爽
回答2：父组件通过props传函数给子，子调用函数传参回调
回答3：可以使用事件订阅这样的东西：
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
回答4：redux的一个作用就是在于在多个不相邻组件之间传值，redux并非不便捷，只是使用redux需要思维方式有一点点转变。习惯后，你会觉得特别好（PS:通过ref往上传值，貌似并非好的React使用模式）。
回答5：就是一级级向上传，it's just how React works.Redux 只应该用在顶层组件，不是用来向上传值的。
