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

React（Facebookのフレームワーク）では、標準for属性を使用してテキスト入力にバインドされたラベル要素をレンダリングする必要があります。 たとえば、次のJSXが使用されます。 <label for="test">Test</label> <input type="text" id="test" /> ただし、これにより、必須（および標準）for属性のないHTMLが生成されます。 <label>Test</label> <input type="text" id="test"> 何が悪いのですか？

250 reactjs  label 

編集：これは複製です、ここを参照してください 状態を設定するときに動的キー名を使用する例は見つかりません。これは私がしたいことです： inputChangeHandler : function (event) { this.setState( { event.target.id : event.target.value } ); }, event.target.idは、更新される状態キーとして使用されます。これはReactでは不可能ですか？

248 javascript  reactjs  computed-properties 

コンポーネントに渡されるオブジェクトの配列が実際に特定の形状のオブジェクトの配列であることを確認するために、proptypeを使用する組み込みの方法はありますか？ たぶんこんな感じ？ annotationRanges: PropTypes.array(PropTypes.shape({ start: PropTypes.number.isRequired, end: PropTypes.number.isRequired, })), 私はここで超明白な何かを見逃していますか？このようなことが非常に求められているようです。

244 arrays  reactjs  react-proptypes 

そのサイズの小道具を受け取るコンポーネントがあります。小道具は文字列または数値ex："LARGE"またはのいずれか17です。 React.PropTypesに、propTypes検証でどちらか一方であることを通知できますか？ タイプを指定しないと、警告が表示されます。 prop type `size` is invalid; it must be a function, usually from React.PropTypes. MyComponent.propTypes = { size: React.PropTypes }

244 reactjs  react-proptypes 

休業。この質問は意見に基づいています。現在、回答を受け付けていません。 この質問を改善してみませんか？質問を更新して、事実と引用で回答できるようにします。この投稿を編集。 昨年休業。 この質問を改善する 最近Reduxを発見しました。それはすべてよさそうだ。FluxではなくReduxを使用することの欠点、落とし穴、妥協点はありますか？ありがとう

243 reactjs  redux  flux  reactjs-flux 

オプションでJSXに要素を含めるにはどうすればよいですか？渡された場合にコンポーネント内にあるはずのバナーを使用した例を次に示します。回避したいのは、ifステートメントでHTMLタグを複製する必要があることです。 render: function () { var banner; if (this.state.banner) { banner = <div id="banner">{this.state.banner}</div>; } else { banner = ????? } return ( <div id="page"> {banner} <div id="other-content"> blah blah blah... </div> </div> ); }

229 javascript  reactjs  react-jsx 

私はReactでReduxを学んでいて、このコードに出くわしました。Redux固有かどうかはわかりませんが、いずれかの例で次のコードスニペットを確認しました。 @connect((state) => { return { key: state.a.b }; }) の機能connectはかなり単純ですが、@以前はわかりませんconnect。私が間違っていなければ、それはJavaScriptオペレーターでさえありません。 誰かがこれは何で、なぜそれが使用されているのか説明してもらえますか？ 更新： 実際react-reduxには、ReactコンポーネントをReduxストアに接続するために使用されます。

226 javascript  reactjs  decorator  redux 

公式には、ドキュメントのリアクト「という状態をReact.PureComponentさんがshouldComponentUpdate()唯一浅くオブジェクトを比較」、および状態は『深い』である場合には、この反対助言します。 これを踏まえて、React.PureComponentReactコンポーネントを作成するときに好むはずの理由はありますか？ 質問： React.Component私たちが行くことを検討する可能性のある使用にパフォーマンスへの影響はありますReact.PureComponentか？ 私は浅い比較だけshouldComponentUpdate()をPureComponent実行すると思います 。この場合、この方法はより深い比較に使用できないのでしょうか？ 「さらに、React.PureComponentのshouldComponentUpdate()スキップは、コンポーネント全体のサブツリーの更新を支える」 -これは小道具の変更が無視されることを意味するのでしょうか？ 質問が役に立った場合、この中程度のブログを読むことから生じました。

224 reactjs  state 

私はreact-reduxの接続方法と、それがパラメーターとして取る関数を理解しようとしています。特にmapStateToProps()。 私の理解では、の戻り値はmapStateToProps、（ストアに存在する）状態から派生したオブジェクトであり、そのキーはターゲットコンポーネント（コンポーネントの接続が適用される）に小道具として渡されます。 つまり、ターゲットコンポーネントによって使用される状態は、ストアに格納される状態とは大きく異なる構造を持つ可能性があります。 Q：大丈夫ですか？ Q：これは予想されますか？ Q：これはアンチパターンですか？

219 javascript  reactjs  redux  react-redux 

React.jsでの作業を開始した後propsはstate、イベントに基づいて変更される一方で、静的である（親コンポーネントから渡される）ように意図されているようです。しかし、私はドキュメントでへの参照に気づきましたcomponentWillReceiveProps。これには特にこの例が含まれています。 componentWillReceiveProps: function(nextProps) { this.setState({ likesIncreasing: nextProps.likeCount > this.props.likeCount }); } これは、toとの比較に基づいてコンポーネントのプロパティを変更できることを意味しているnextPropsようthis.propsです。何が欠けていますか？小道具はどのように変更されますか、またはこれがどこで呼び出されるのか私は間違っていますか？

217 javascript  reactjs  properties 

this.props.history.push('/page')React-Router v4でどのようにパラメーターを渡すことができますか？ .then(response => { var r = this; if (response.status >= 200 && response.status < 300) { r.props.history.push('/template'); });

216 reactjs  react-router 

あるコンポーネントを別の反応コンポーネントに渡す方法はありますか？そのコンテンツをトランスクルージョンするために、モデルの反応コンポーネントを作成し、別の反応コンポーネントを渡したいのですが。 編集：これは私がやろうとしていることを説明するreactJS codepenです。http://codepen.io/aallbrig/pen/bEhjo HTML <div id="my-component"> <p>Hi!</p> </div> ReactJS /**@jsx React.DOM*/ var BasicTransclusion = React.createClass({ render: function() { // Below 'Added title' should be the child content of <p>Hi!</p> return ( <div> <p> Added title </p> {this.props.children} </div> ) } }); React.renderComponent(BasicTransclusion(), document.getElementById('my-component'));

215 javascript  reactjs 

私は次の構造を持っています： FormEditor-複数のFieldEditorを保持 FieldEditor-フォームのフィールドを編集し、その状態に関するさまざまな値を保存します FormEditor内でボタンをクリックすると、すべてのFieldEditorコンポーネントのフィールドに関する情報、その状態の情報を収集し、FormEditor内にすべて表示できるようにしたいと考えています。 私は、FieldEditorの状態以外のフィールドに関する情報を格納し、FormEditor代わりにの状態にすることを検討しました。ただし、情報を変更して状態に格納するときに、FormEditor各FieldEditorコンポーネントをリッスンする必要があります。 代わりに、子供の状態にアクセスすることはできませんか？理想ですか？

214 javascript  reactjs 

Reactは、http：//facebook.github.io/react/docs/jsx-gotchas.htmlで説明されているように、カスタム属性をレンダリングできます 。 カスタム属性を使用する場合は、data-をプレフィックスとして付ける必要があります。 <div data-custom-attribute="foo" /> そしてそれは私がイベントオブジェクトからそれにアクセスする方法を見つけることができないことを除いて素晴らしいニュースです：例えば： render: function() { ... <a data-tag={i} style={showStyle} onClick={this.removeTag}></a> ... removeTag: function(event) { this.setState({inputVal: event.target????}); }, 要素とdata-プロパティはhtmlでレンダリングされます。のような標準のプロパティにstyleは問題なくアクセスできますevent.target.style。event.target私が試した代わりに： event.target.props.data.tag event.target.props.data["tag"] event.target.props["data-tag"] event.target.data.tag event.target.data["tag"] event.target["data-tag"] これらはどれも機能しませんでした。

214 javascript  facebook  reactjs 

onKeyPressReactJSでイベントを機能させるにはどうすればよいですか？をenter (keyCode=13)押すと警告が表示されます。 var Test = React.createClass({ add: function(event){ if(event.keyCode == 13){ alert('Adding....'); } }, render: function(){ return( <div> <input type="text" id="one" onKeyPress={this.add} /> </div> ); } }); React.render(<Test />, document.body);

214 javascript  reactjs  keypress  onkeypress