Выбор ReactJS компонента динамически, по умолчанию сортировки

Question

Возможно ли каким-то образом инициировать компонент через actionsjs, который не является хакерским поведением? Пример. У меня есть большой набор объектов, которые имеют сходные группировки. Из которого я создаю меню сорта или вкладки на основе каждой группы. Из которого пользователь может выбрать и увидеть подэлементы для этой группировки.

Дело в том, что вы видите пользовательский интерфейс, который по существу наполовину пуст, когда вы приземляетесь на него изначально. Итак, что бы я хотел сделать, так это выбрать первый компонент в навигации по группам и вызвать его подгруппу для отображения.

Я знаю, что если я использую JQuery я мог бы просто сделать

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

Но я пытаюсь создать этот метод в React без JQuery и без методов разовых если вообще possile

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