2

Bootstrap を使用して Symfony フレームワーク上に構築されたソーシャル ネットワーキング Web サイトがあります。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>);
}  
});

ドロップダウンはこのコードを使用して完全に機能しますが、これは反応でブートストラップ コンポーネントを使用する正しい方法ですか?

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=(code); だけでは使えません。メニュー バーのデータが変更され、ユーザーが検索バーに入力したデータを処理する必要があるためです。場合によっては、Maximum call stack size exceeded error. React-bootstrap を使用する最良の方法は何ですか? それを使用するか、ブートストラップコンポーネントを直接使用する必要がありますか? 他の解決策はありますか？

4

1 に答える 1

2

あなたの場合、script タグでコンポーネントを作成しているだけなので、react-bootstrap パッケージを使用せずにブートストラップ クラス名を使用しても問題ありません。それを行う間違った方法や正しい方法はありません。

react-boostrap を使用すると、コードがよりモジュール化されるため便利です。すべてがコンポーネントに渡す状態と小道具に依存するため、スタイルの変更に対応する必要はありません。

于 2015-05-09T17:28:36.420 に答える