タグ付けされた質問 「reactjs」

私はJavascript（ES6）/ FaceBook反応を使用して、サイズが異なる配列の最初の3つの要素を取得しようとしています。Linq take（n）と同等のことをしたいと思います。 私のJsxファイルには次のものがあります： var items = list.map(i => { return ( <myview item={i} key={i.id} /> ); }); その後、私が試した最初の3つのアイテムを取得するには var map = new Map(list); map.size = 3; var items = map(i => { return (<SpotlightLandingGlobalInboxItem item={i} key={i.id} />); }); マップにはセット関数がないため、これは機能しませんでした。 手伝ってくれませんか？

384 javascript  reactjs 

私が見たリアクト（でのdevの話を- JSConf EU 2013再考ベストプラクティスを：：リアクトピート・ハントを）とスピーカーは、モデルのダーティー・チェックが遅くなることが言及しました。しかし、仮想DOMは、ほとんどの場合、モデルよりも大きいはずなので、仮想DOM間の差分の計算は実際にはそれほど効率的ではありませんか？ 私は本当に仮想DOMの潜在的な能力（特にサーバー側のレンダリング）が好きですが、すべての長所と短所を知りたいです。

372 javascript  dom  reactjs  virtual-dom 

要素の高さを動的に設定する必要があるアプリ（「app-content」としましょう）があります。アプリの「クローム」の高さを取り、それを差し引いて、「app-content」の高さをこれらの制約内で100％に収まるように設定します。これはバニラJS、jQuery、またはバックボーンビューで非常にシンプルですが、Reactでこれを行うための適切なプロセスを理解するのに苦労していますか？ 以下はコンポーネントの例です。app-contentの高さをウィンドウの100％からActionBarand のサイズを引いた値に設定できるようにしたいのですBalanceBarが、すべてがレンダリングされたとき、およびこのReactクラスのどこに計算を配置するかをどのようにして知ることができますか？ /** @jsx React.DOM */ var List = require('../list'); var ActionBar = require('../action-bar'); var BalanceBar = require('../balance-bar'); var Sidebar = require('../sidebar'); var AppBase = React.createClass({ render: function () { return ( <div className="wrapper"> <Sidebar /> <div className="inner-wrapper"> <ActionBar title="Title Here" /> <BalanceBar balance={balance} /> <div className="app-content"> <List items={items} …

367 javascript  reactjs 

現在のバージョンのReact Router（v3）では、サーバーの応答を受け入れ、を使用browserHistory.pushして適切な応答ページに移動できます。ただし、これはv4では使用できません。また、これを処理する適切な方法が何かはわかりません。 この例では、Reduxを使用して、ユーザーがフォームを送信すると、components / app-product-form.jsが呼び出さthis.props.addProduct(props)れます。サーバーが成功を返すと、ユーザーはカートページに移動します。 // actions/index.js export function addProduct(props) { return dispatch => axios.post(`${ROOT_URL}/cart`, props, config) .then(response => { dispatch({ type: types.AUTH_USER }); localStorage.setItem('token', response.data.token); browserHistory.push('/cart'); // no longer in React Router V4 }); } React Router v4の機能からカートページにリダイレクトするにはどうすればよいですか？

361 reactjs  react-router  react-router-v4 

私は、1つの制御された入力があると私が信じる形式の単純な反応コンポーネントを持っています： import React from 'react'; export default class MyForm extends React.Component { constructor(props) { super(props); this.state = {} } render() { return ( <form className="add-support-staff-form"> <input name="name" type="text" value={this.state.name} onChange={this.onFieldChange('name').bind(this)}/> </form> ) } onFieldChange(fieldName) { return function (event) { this.setState({[fieldName]: event.target.value}); } } } export default MyForm; アプリケーションを実行すると、次の警告が表示されます。 警告：MyFormは、制御対象のテキストタイプの非制御入力を変更しています。入力要素は、非制御から制御（またはその逆）に切り替えないでください。コンポーネントの存続期間中、制御された入力要素と制御されていない入力要素のどちらを使用するかを決定する 入力には値があるため、入力は制御されていると思います。私は何が間違っているのでしょうか？ …

360 javascript  node.js  reactjs  react-state 

私はReduxライブラリのドキュメントを読んでいましたが、次の例があります。 状態を読み取ることに加えて、コンテナコンポーネントはアクションをディスパッチできます。同様にmapDispatchToProps()、dispatch()メソッドを受け取り、プレゼンテーションコンポーネントに注入するコールバックプロップを返す、という関数を定義できます。 これは実際には意味がありません。mapDispatchToPropsすでに持っているのになぜ必要なのmapStateToPropsですか？ また、次の便利なコードサンプルも提供しています。 const mapDispatchToProps = (dispatch) => { return { onTodoClick: (id) => { dispatch(toggleTodo(id)) } } } 誰かがこの関数が何であるか、そしてなぜそれが有用であるかを素人の言葉で説明できますか？

358 reactjs  redux  react-redux 

私の構造は次のようになります： Component 1 - |- Component 2 - - |- Component 4 - - - |- Component 5 Component 3 コンポーネント3は、コンポーネント5の状態に応じていくつかのデータを表示する必要があります。プロップは不変なので、コンポーネント1にその状態を保存して転送することはできません。そして、はい、私はreduxについて読みましたが、それを使いたくありません。反応だけで解決できることを願っています。私が間違っている？

349 javascript  reactjs  web-deployment 

私はReactJSとJSXを初めて使用し、以下のコードに少し問題があります。 classNameそれぞれの属性に複数のクラスを追加しようとしていますli： <li key={index} className={activeClass, data.class, "main-class"}></li> 私のReactコンポーネントは： var AccountMainMenu = React.createClass({ getInitialState: function() { return { focused: 0 }; }, clicked: function(index) { this.setState({ focused: index }); }, render: function() { var self = this; var accountMenuData = [ { name: "My Account", icon: "icon-account" }, { name: "Messages", …

346 javascript  css  reactjs  ecmascript-6 

私のコンポーネントのレンダー関数には、次のようなものがあります。 render() { const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => { return (<li onClick={this.onItemClick.bind(this, item)} key={item}>{item}</li>); }); return ( <div> ... <ul> {items} </ul> ... </div> ); } すべて正常にレンダリングされますが、<li>要素をクリックすると、次のエラーが表示されます。 キャッチされないエラー：不変の違反：オブジェクトはReactの子として有効ではありません（見つかった：キー{dispatchConfig、dispatchMarker、nativeEvent、target、currentTarget、type、eventPhase、bubbles、cancellable、timeStamp、defaultPrevented、isTrusted、view、detail、screenXを持つオブジェクト、screenY、clientX、clientY、ctrlKey、shiftKey、altKey、metaKey、getModifierState、button、buttons、relatedTarget、pageX、pageY、isDefaultPrevented、isPropagationStopped、_dispatchListeners、_dispatchIDs}）。子のコレクションをレンダリングする場合は、代わりに配列を使用するか、ReactアドオンのcreateFragment（object）を使用してオブジェクトをラップしてください。のレンダリング方法を確認してくださいWelcome。 map関数の内部に変更するthis.onItemClick.bind(this, item)と(e) => onItemClick(e, item)、すべてが期待どおりに機能します。 誰かが私が間違っていることを説明し、なぜこのエラーが発生するのかを説明できれば、すばらしいでしょう 更新1： onItemClick関数は次のとおりであり、this.setStateを削除するとエラーが消えます。 onItemClick(e, item) { this.setState({ lang: item, }); } しかし、このコンポーネントの状態を更新する必要があるため、この行を削除することはできません

337 javascript  reactjs 

react-routerv3からv4に置き換えたところです。 しかし、のメンバー関数をプログラムでナビゲートする方法がわかりませんComponent。つまり、handleClick()関数では、/path/some/whereいくつかのデータを処理した後に移動したいと思います。以前は次の方法でそれを行っていました。 import { browserHistory } from 'react-router' browserHistory.push('/path/some/where') しかし、v4ではそのようなインターフェースを見つけることができません。 v4を使用してナビゲートするにはどうすればよいですか？

335 reactjs  ecmascript-6  react-router-v4 

次のような親コンポーネントから渡される内容に応じて、このボタングループを条件付きで表示および非表示にしたいと思います。 <TopicNav showBulkActions={this.__hasMultipleSelected} /> .... __hasMultipleSelected: function() { return false; //return true or false depending on data } .... var TopicNav = React.createClass({ render: function() { return ( <div className="row"> <div className="col-lg-6"> <div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}"> <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Bulk Actions <span …

334 javascript  css  twitter-bootstrap-3  reactjs  class-attributes 

警告：コンポーネントは、制御されるタイプのテキストの非制御入力を変更しています。入力要素は、非制御から制御へ（またはその逆）に切り替えないでください。コンポーネントの有効期間中、制御された入力要素と制御されていない入力要素のどちらを使用するかを決定します。* 以下は私のコードです： constructor(props) { super(props); this.state = { fields: {}, errors: {} } this.onSubmit = this.onSubmit.bind(this); } .... onChange(field, e){ let fields = this.state.fields; fields[field] = e.target.value; this.setState({fields}); } .... render() { return( <div className="form-group"> <input value={this.state.fields["name"]} onChange={this.onChange.bind(this, "name")} className="form-control" type="text" refs="name" placeholder="Name *" /> <span style={{color: "red"}}>{this.state.errors["name"]}</span> </div> ) …

331 javascript  reactjs 

私はのフォームセクションを読んでいます反応ドキュメントとonChange使用方法を示すためにこのコードを試してみました（JSBIN）。 var React= require('react'); var ControlledForm= React.createClass({ getInitialState: function() { return { value: "initial value" }; }, handleChange: function(event) { console.log(this.state.value); this.setState({value: event.target.value}); console.log(this.state.value); }, render: function() { return ( <input type="text" value={this.state.value} onChange={this.handleChange}/> ); } }); React.render( <ControlledForm/>, document.getElementById('mount') ); <input/>ブラウザで値を更新するとconsole.log、handleChangeコールバック内の2番目valueが最初と同じように出力されますが、コールバックのスコープでconsole.log結果が表示さthis.setState({value: event.target.value})れないのはなぜhandleChangeですか？

326 javascript  reactjs  react-jsx 

私はReactJSを使い始めたばかりで、私が抱えている問題に少し行き詰まっています。 私のアプリケーションは基本的にフィルターを備えたリストとレイアウトを変更するためのボタンです。現在<list />、3つのコンポーネントを使用しています：< Filters />と<TopBar />、ここで設定を変更すると、ビューを更新するために< Filters />何らかのメソッドをトリガーする必要があり<list />ます。 これらの3つのコンポーネントを相互に作用させるにはどうすればよいですか、または変更を加えることができるある種のグローバルデータモデルが必要ですか？

321 javascript  reactjs 

次のエラーが発生します Uncaught TypeError：未定義のプロパティ 'setState'を読み取れません コンストラクタでデルタをバインドした後でも。 class Counter extends React.Component { constructor(props) { super(props); this.state = { count : 1 }; this.delta.bind(this); } delta() { this.setState({ count : this.state.count++ }); } render() { return ( <div> <h1>{this.state.count}</h1> <button onClick={this.delta}>+</button> </div> ); } }

316 javascript  reactjs