Question

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

事实上，当你最初降落时，你会看到一个基本上半空的用户界面。所以我想做的就是以某种方式选择组导航中的第一个组件，然后调用其子组进行显示。

我知道如果我使用的是jQuery，我可以简单地执行

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

但是我试图在没有jQuery的情况下在React中创建这个方法，如果可能的话没有一次性方法

Answer 1

我建议您控制哪个组在您的顶级组件状态中显示。以下是JSfiddle中的最小工作示例，其中包含以下代码，您可以通过单击<li>项来切换组。您可以从changeGroup组件中的任何位置调用函数App来更改活动组。在此示例中，函数回调被传递给onClick元素的<li>事件处理程序。

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'));

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

1 个答案: