Использование компонентов Bootstrap с Reactjs

Question

У меня есть сайт социальной сети, построенный на основе Symfony с использованием Bootstrap. Я читал о React.js, и теперь я пишу часть просмотра, используя его. У меня есть несколько вопросов.

1) Могу ли я напрямую использовать компоненты начальной загрузки? Для ПРИМЕР-

var NavbarLeftMenuBar=React.createClass({ 
render: function() { 
    return(<ul className="nav navbar-nav"> 
       <li><a data-toggle="modal" href="#myModal" id="help">Help</a></li> 
       <li> <a href="" className="dropdown-toggle" data-toggle="dropdown">Menu <b className="caret"></b></a> 
        <ul className="dropdown-menu"> 
         <li><a href="">Menu1</a></li> 
         <li><a href="">Menu2 </a></li> 
         <li><a href="">Menu3 </a></li> 
         <li><a href="">Menu4 </a></li> 
        </ul> 
       </li> 
      </ul>); 
} 
}); 
var NavbarSearchBar=React.createClass({ 
render: function() { 
    var buttonStyle={ marginLeft:-20,borderLeft:0 }; 
    var ulStyle={marginLeft:-20,marginTop:12}; 
    return <form className="navbar-form navbar-left" id="search" role="search"> 
       <div className="form-group"> 
        <input type="text" className="form-control" placeholder="Search" value="{%if query is defined%}{{query}}{%endif%}"/> 
        <input type="hidden" value="{%if searchin is defined%}{{searchin}}{%else%}1{%endif%}" id="searchin"/> 
       </div> 
       <span className="dropdown"> 
        <button style={buttonStyle} type="button" className="btn btn-white dropdown-toggle text-info-all" data-toggle="dropdown"><span data-bind="label" className="{%if searchin is not defined%}fa fa-users {%elseif searchin==1%}fa fa-users{%else%} fa fa-bell-o{%endif%}"></span> <span className="caret"></span></button> 
         <ul style={ulStyle} className="dropdown-menu"> 
          <li data-search="1"><a href="#"><span className="fa fa-users"></span> Search for Users</a></li> 
          <li data-search="2"><a href="#"><span className="fa fa-bell-o"></span> Search in Status</a></li> 
         </ul> 
       </span> 
       <button type="submit" className="btn btn-default" id="searchbutton">Submit</button> 
      </form>; 
} 
}); 
var Navbar = React.createClass({ 
render: function() { 
return(<nav className="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div className="container"> 
     <div className="navbar-header"> 
     <a className="navbar-brand" href="{{path('homepage')}}">Brand Name</a> 
     </div> 
     <NavbarLeftMenuBar/> 
     <NavbarSearchBar/> 
     </div> 
     </nav>); 
} 
}); 

Dropdowns работа perfecly с помощью этого кода, но это правильный способ использования компонентов начальной загрузки в реакции?

2) Использование реагируют-самозагрузки

Я также попытался с помощью React-bootstrap. Я столкнулся с несколькими проблемами, использующими его. Поскольку я должен отображать панель поиска в навигационной панели, я должен использовать состояние для поиска. Кроме того, меню в navbar будет обновляться в соответствии с поведением. Использование React.createClass не работает.

var NavbarLeftMenuBar=React.createClass({ 
    render: function() { 
      return <Nav> 
      <NavItem eventKey={1} href='#'>Help</NavItem> 
      <DropdownButton eventKey={2} title='Dropdown'> 
        <MenuItem eventKey='1' href=''>Home</MenuItem> 
        <MenuItem eventKey='2' href=''>LInk2</MenuItem> 
        <MenuItem eventKey='3' href=''>Link3</MenuItem> 
        <MenuItem eventKey='4' href=''>Link4</MenuItem> 
      </DropdownButton> 
      </Nav>; 
    } 
    }); 
var NavbarSearchBar=React.createClass({ 
render: function() { 
    var buttonStyle={ marginLeft:-20,borderLeft:0 }; 
    var ulStyle={marginLeft:-20,marginTop:12}; 
    return <form className="navbar-form navbar-left" id="search" role="search"> 
       <div className="form-group"> 
        <input type="text" className="form-control" placeholder="Search" value="{%if query is defined%}{{query}}{%endif%}"/> 
        <input type="hidden" value="{%if searchin is defined%}{{searchin}}{%else%}1{%endif%}" id="searchin"/> 
       </div> 
       <span className="dropdown"> 
        <button style={buttonStyle} type="button" className="btn btn-white dropdown-toggle text-info-all" data-toggle="dropdown"><span data-bind="label" className="{%if searchin is not defined%}fa fa-users {%elseif searchin==1%}fa fa-users{%else%} fa fa-bell-o{%endif%}"></span> <span className="caret"></span></button> 
         <ul style={ulStyle} className="dropdown-menu"> 
          <li data-search="1"><a href="#"><span className="fa fa-users"></span> Search for Users</a></li> 
          <li data-search="2"><a href="#"><span className="fa fa-bell-o"></span> Search in Status</a></li> 
         </ul> 
       </span> 
       <button type="submit" className="btn btn-default" id="searchbutton">Submit</button> 
      </form>; 
} 
}); 
var NavbarWindow =React.createClass({ 
    render:function() { 
    return <Navbar brand={<a href="{{path('homepage')}}">Brand name</a>}> 
      <NavbarLeftMenuBar/> 
      <NavbarSearchBar/> 
      </Navbar>; 
    } 
    }); 

Это не относится к css должным образом. Я не могу использовать только const varname = (код); потому что данные в строке меню меняются, и я должен обрабатывать данные, введенные пользователем на панели поиска. Иногда я даже получаю ошибку Maximum call stack size exceeded error. Что было бы лучшим способом использовать React-bootstrap? Должен ли я использовать его или напрямую использовать компоненты начальной загрузки? Любые другие решения?

Answer 1

В вашем случае, поскольку вы просто создаете свой компонент в теге скрипта, использование имен классов начальной загрузки без использования пакета реакции-бутстрапа в порядке. Нет неправильного или правильного способа сделать это.

Использование реакции-boostrap приятно, так как это делает ваш код более модульным, и вам не нужно жонглировать меняющимися стилями, поскольку все зависит от состояния и реквизита, который вы передаете своим компонентам.