Javascript 动态选择组件，作为默认排序

是否有可能通过reactjs触发一个组件，而这不是某种黑客行为？例如，我有一大组共享相似分组的对象。我从中生成一个基于每个组的排序或选项卡菜单。用户可以从中选择并查看该分组的子对象

问题是，当您最初登陆时，您会看到一个基本上是半空的UI。所以我想做的是在组导航中选择第一个组件，并将其调出子组进行显示

我知道如果我使用jQuery，我可以简单地

$('.group-tab:first').click();

---

但是我尝试在React中创建此方法，不使用jQuery，也不使用一次性方法（如果可能的话）

我建议您控制顶级组件状态中显示的组。下面是中的一个最小工作示例，使用下面的代码，您可以通过单击

项来切换组。您可以从

App

组件中的任意位置调用函数

changeGroup

，以更改活动组。在本例中，函数回调被传递给

元素的

onClick

事件处理程序

class App extends React.Component {
    constructor(){
        this.state={active_group: 0};
        this.changeGroup = this.changeGroup.bind(this);
    }
    changeGroup(group_id){
        this.setState({active_group: group_id});
    }
    render() {
        //this is a rough implementation
        var group = '';
        if (this.state.active_group == 1){
            group = <Group1/>;
        }
        else if (this.state.active_group == 2){
            group = <Group2/>;
        }
        else if (this.state.active_group == 3){
            group = <Group3/>;
        }
        return (
            <div>
                <ul> 
                    Here is the nav 
                    <li onClick={this.changeGroup.bind(this,1)}> Group 1 </li>
                    <li onClick={this.changeGroup.bind(this,2)}> Group 2 </li>
                    <li onClick={this.changeGroup.bind(this,3)}> Group 3 </li>
                </ul>
                {group}
            </div>
        );
    }
};

 class Group1 extends React.Component {
    render(){
        return(<div> Group 1 now showing </div>)
    }
};

class Group2 extends React.Component {
    render(){
        return(<div> Group 2 now showing </div>)
    }
};

class Group3 extends React.Component {
    render(){
        return(<div> Group 3 now showing </div>)
    }
};



React.render(<App />, document.getElementById('container'));

类应用程序扩展了React.Component{
构造函数（）{
this.state={active_group:0}；
this.changeGroup=this.changeGroup.bind（this）；
}
变更组（组id）{
this.setState（{active_group:group_id}）；
}
render（）{
//这是一个粗略的实现
var组=“”；
if（this.state.active_group==1）{
组=；
}
else if（this.state.active_group==2）{
组=；
}
else if（this.state.active_group==3）{
组=；
}
返回(

这是导航
组1
group2
组3

{group}
);
}
};
类Group1扩展了React.Component{
render（）{
返回（第1组现在显示）
}
};
类Group2扩展了React.Component{
render（）{
返回（第2组现在显示）
}
};
类Group3扩展了React.Component{
render（）{
返回（第3组现在显示）
}
};
React.render（，document.getElementById（'container'）；

我建议您控制顶级组件状态中显示的组。然后，您可以使用

setState

切换活动组，而不是触发单击事件来打开组。哦，不，我不想触发单击关闭。这只是简单地暗示了人们可以用jQuery做些什么，因为我现在对jQuery比对React更熟悉。如果这有助于澄清我之前的评论，请告诉我。确实如此，谢谢。虽然对于一个星期五来说，这比我现在要提供的更多的思考，只是因为我已经设计了我目前正在开发的大多数应用程序（这取决于视觉快感），并且必须弄清楚在哪里/如何将类似的东西添加到我的逻辑中