Question

我的应用程序有两个主要组件（着陆和技能）：

App = React.createClass({
    render() {
      return (

          <div>
            <Landing />
            <Skills category={category}/>
          </div>

      );
    }
});

在“登陆”中，我有一个SocialMenu组件，它有一个项目列表（项目列表被提供给SocialMenu，如：<SocialMenu items={ ['Home', 'Services', 'About', 'Contact us']} />。点击后，点击的项目会突出显示。

SocialMenu = React.createClass({

    getInitialState: function(){
        return { focused: 0 };
    },

    clicked: function(index){
        this.setState({focused: index});
    },

        var self = this;

        return (
            <div>
                <ul className="testblocks">{ this.props.items.map(function(m, index){

                    var style = '';

                    if(self.state.focused == index){
                        style = 'focused';
                    }

                    return <li key={index} className={style} onClick={self.clicked.bind(self, index)}>{m}</li>;

                }) }

                </ul>


                <p>Selected: {this.props.items[this.state.focused]}</p> 

            </div>
        );

    }
});

我希望发生的事情是将SocialMenu的索引数据传递给Skills组件。

但是，我不知道该怎么做，因为SocialMenu是Landing的孩子，而不是Skills的孩子。（我希望将列表保持在登陆状态，但是将该列表的点击输出放入技能中）。

我该怎么做？

Answer 1

你需要像Flux这样的东西communication betweeen components that don't have parent-child relationship：

用于两个没有组件的组件之间的通信亲子关系，您可以设置自己的全局事件系统。订阅componentDidMount（）中的事件，取消订阅 componentWillUnmount（），并在收到事件时调用setState（）。 Flux模式是安排这种方式的可能方式之一。

因此，对于您的情况，您需要有一个像SELECT_SOCIAL这样的事件来传递索引信息，而您的Landing组件将有一个监听器来接收索引信息。

Answer 2

你真的不需要Flux。你可能会在某个时候，但如果这就是你需要做的，为什么不把状态移到App组件，然后发送它Landing＆amp;技能组件作为道具。您可能还需要将clicked处理程序作为支柱传递给SocialMenu。

在单击事件上将数据发送到React.js中的间接子节点

2 个答案: