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

react-router私は使用することができますLinkネイティブにルータを反応させることにより、処理されたリンクを作成する要素を。 私は内部的にそれが呼び出すのを見ますthis.context.transitionTo(...)。 ナビをしたい。リンクからではなく、ドロップダウン選択から（例として）。コードでこれを行うにはどうすればよいですか？なにthis.context？ Navigationミックスインを見ましたが、これなしでできmixinsますか？

1431 reactjs  react-router 

Reactで次のようなことを実行しようとしていますJSX（ObjectRowは別のコンポーネントです）。 <tbody> for (var i=0; i < numrows; i++) { <ObjectRow/> } </tbody> 関数呼び出しにマップしているJSXので、これが有効ではない理由を理解しましたJSX。しかし、テンプレートランドから来てJSX、に新しいので、上記をどのように達成するか（コンポーネントを複数回追加する）はわかりません。

1278 javascript  reactjs 

休業。この質問は意見に基づいています。現在、回答を受け付けていません。 昨年休業。 ロックされています。質問はトピックから外れていますが、歴史的に重要であるため、この質問とその回答はロックされています。現在、新しい回答や相互作用を受け入れていません。 私はこの答えを読んで、ボイラープレートを減らし、GitHubの例をいくつか見て、少しやり直してみました（todoアプリ）。 私が理解しているように、公式のredux doc動機は、従来のMVCアーキテクチャと比較して長所を提供します。しかし、それは質問に対する答えを提供しません： Facebook FluxではなくReduxを使用する理由 それはプログラミングスタイルの問題だけですか？機能か非機能か？または、問題はreduxアプローチから続く能力/開発ツールにありますか？たぶんスケーリング？またはテスト？ reduxは関数型言語から来た人々にとって流動的なものだと言ってもよろしいですか？ この質問に答えるために、実装の複雑さを比較することができます。 公式のredux docモチベーションのモチベーションポイントは次のとおりです。 楽観的な更新の処理（私が理解しているように、5番目の点にほとんど依存しません。Facebookの変化に実装するのは難しいですか？） サーバーでのレンダリング（facebookフラックスでもこれを行うことができます。reduxと比較して何か利点はありますか？） ルート遷移を実行する前にデータを取得する（facebookフラックスではなぜそれができないのですか？利点は何ですか？） ホットリロード（React Hot Reloadで可能です。なぜreduxが必要なのですか？） 元に戻す/やり直し機能 その他のポイントは？持続する状態のように...

1126 javascript  reactjs  reactjs-flux  flux  redux 

何をしない...、この中にコードとそれが呼ばれている？（JSXを使用して）リアクトありませんか <Modal {...this.props} title='Modal heading' animation={false}>

897 javascript  reactjs 

一般的な方法で使用できるいくつかのコンポーネントを定義する適切な方法を見つけようとしています： <Parent> <Child value="1"> <Child value="2"> </Parent> もちろん、親と子のコンポーネント間のレンダリングのために行くの論理があり、あなたが想像できる<select>と<option>、このロジックの例としては。 これは質問のためのダミー実装です： var Parent = React.createClass({ doSomething: function(value) { }, render: function() { return (<div>{this.props.children}</div>); } }); var Child = React.createClass({ onClick: function() { this.props.doSomething(this.props.value); // doSomething is undefined }, render: function() { return (<div onClick={this.onClick}></div>); } }); 問題は{this.props.children}、ラッパーコンポーネントを定義するために使用するときはいつでも、すべての子にいくつかのプロパティをどのように渡すのですか？

889 javascript  reactjs  react-jsx 

私は好奇心からReactを学び始め、ReactとReact Nativeの違いを知りたかったのですが、Googleを使用して満足のいく答えを見つけることができませんでした。ReactとReact Nativeの形式は同じようです。それらは完全に異なる構文を持っていますか？

730 javascript  reactjs  react-native  javascript-framework 

変更をリッスンしたい外部（コンポーネント）の監視可能なオブジェクトがあります。オブジェクトが更新されると、変更イベントが発生し、変更が検出されたときにコンポーネントを再レンダリングします。 トップレベルではReact.renderこれが可能でしたが、コンポーネント内では機能しません（renderメソッドがオブジェクトを返すだけなので、これは理にかなっています）。 次にコード例を示します。 export default class MyComponent extends React.Component { handleButtonClick() { this.render(); } render() { return ( <div> {Math.random()} <button onClick={this.handleButtonClick.bind(this)}> Click me </button> </div> ) } } ボタンをクリックすると内部的にが呼び出されますがthis.render()、それが実際にレンダリングを発生させる原因ではありません（によって作成されたテキスト{Math.random()}は変更されないため、実際にこれを確認できます）。ただし、のthis.setState()代わりに単に呼び出すとthis.render()、正常に機能します。 だから私は私の質問だと思います： Reactコンポーネントは再レンダリングするために状態を持つ必要がありますか？状態を変更せずにコンポーネントをオンデマンドで更新する方法はありますか？

688 reactjs  react-jsx 

ドキュメントによれば、「ミドルウェアがなければ、Reduxストアは同期データフローのみをサポートします」とのことです。なぜそうなのかわかりません。コンテナコンポーネントが非同期APIを呼び出してdispatchからアクションを呼び出せないのはなぜですか？ たとえば、フィールドとボタンという単純なUIを想像してください。ユーザーがボタンを押すと、フィールドにリモートサーバーからのデータが入力されます。 import * as React from 'react'; import * as Redux from 'redux'; import { Provider, connect } from 'react-redux'; const ActionTypes = { STARTED_UPDATING: 'STARTED_UPDATING', UPDATED: 'UPDATED' }; class AsyncApi { static getFieldValue() { const promise = new Promise((resolve) => { setTimeout(() => { resolve(Math.floor(Math.random() * 100)); }, …

684 javascript  asynchronous  reactjs  redux  redux-thunk 

JSONデータソースを受け入れ、並べ替え可能なテーブルを作成するReactコンポーネントを構築しています。 各動的データ行には一意のキーが割り当てられていますが、次のエラーが発生します。 配列の各子には、一意の「キー」プロップが必要です。 TableComponentのrenderメソッドを確認してください。 私のTableComponentrenderメソッドは次を返します： <table> <thead key="thead"> <TableHeader columns={columnNames}/> </thead> <tbody key="tbody"> { rows } </tbody> </table> TableHeaderコンポーネントは、単一の行であり、また、それに割り当てられた一意のキーを有しています。 各rowはrows、一意のキーを持つコンポーネントから構築されています。 <TableRowItem key={item.id} data={item} columns={columnNames}/> そして、TableRowItemこのように見えます： var TableRowItem = React.createClass({ render: function() { var td = function() { return this.props.columns.map(function(c) { return <td key={this.props.data[c]}>{this.props.data[c]}</td>; }, this); }.bind(this); return ( <tr>{ td(this.props.item) …

656 javascript  reactjs 

私はReact-routerを使用しており、リンクボタンをクリックしている間は問題なく動作しますが、Webページを更新すると、必要なものが読み込まれません。 たとえばlocalhost/joblist、リンクを押してここに到着したので、私は入っており、すべてが順調です。しかし、ウェブページを更新すると、次のようになります。 Cannot GET /joblist デフォルトでは、このように機能しませんでした。最初、私は私のURLをそのまま使用localhost/#/しましたがlocalhost/#/joblist、それらは完全に問題なく動作しました。しかし、私はこの種のURLが好きではないので、それを消去しようとすると#、私は書きました： Router.run(routes, Router.HistoryLocation, function (Handler) { React.render(<Handler/>, document.body); }); この問題はでは発生しません。この問題はlocalhost/常に私が欲しいものを返します。 編集：このアプリは単一ページであるため/joblist、サーバーに何も要求する必要はありません。 EDIT2：私のルーター全体。 var routes = ( <Route name="app" path="/" handler={App}> <Route name="joblist" path="/joblist" handler={JobList}/> <DefaultRoute handler={Dashboard}/> <NotFoundRoute handler={NotFound}/> </Route> ); Router.run(routes, Router.HistoryLocation, function (Handler) { React.render(<Handler/>, document.body); });

655 javascript  reactjs  url  react-router 

onClickイベント値のプロパティを読みたいのですが。しかし、それをクリックすると、コンソールに次のようなものが表示されます。 SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", nativeEvent: MouseEvent, type: "click", target 私のコードは正しく動作しています。実行すると、表示されます{column}が、onClickイベントで取得できません。 私のコード： var HeaderRows = React.createClass({ handleSort: function(value) { console.log(value); }, render: function () { var that = this; return( <tr> {this.props.defaultColumns.map(function (column) { return ( <th value={column} onClick={that.handleSort} >{column}</th> ); })} {this.props.externalColumns.map(function (column) { // Multi dimension array …

639 javascript  reactjs 

コンポーネントがレンダリングされた後、特定のテキストフィールドにフォーカスを設定する反応的な方法は何ですか？ ドキュメントは参照の使用を提案しているようです、例えば： ref="nameInput"render関数の入力フィールドに設定してから、次を呼び出します。 this.refs.nameInput.getInputDOMNode().focus(); しかし、これをどこに呼べばいいのでしょうか。私はいくつかの場所を試しましたが、機能させることができません。

629 javascript  reactjs 

私はReactのPluralsightコースを見ていて、インストラクターは小道具を変更しないでくださいと言いました。私は今読んでいます、小道具対状態に関する記事（uberVU / react-guide）を、それは言う 小道具と状態変化の両方がレンダー更新をトリガーします。 記事の後半でそれは言う： 小道具（プロパティの略）はコンポーネントの構成であり、必要に応じてそのオプションです。それらは上から受け取られ、不変です。 小道具は変更できますが、不変でなければなりませんか？ いつプロップを使用し、いつステートを使用する必要がありますか？ Reactコンポーネントが必要とするデータがある場合、それを介してReactコンポーネントのプロップまたはセットアップを介して渡す必要がありますgetInitialStateか？

559 javascript  reactjs 

特定の条件が満たされた場合にのみReactコンポーネントに属性を追加する方法はありますか？ レンダリング後のAjax呼び出しに基づいてフォーム要素にrequired属性とreadOnly属性を追加することになっていますが、readOnly = "false"は属性を完全に省略するのと同じではないため、これを解決する方法を理解できません。 以下の例は、私が何を望んでいるかを説明しているはずですが、機能しません（解析エラー：予期しない識別子）。 var React = require('React'); var MyOwnInput = React.createClass({ render: function () { return ( <div> <input type="text" onChange={this.changeValue} value={this.getValue()} name={this.props.name}/> </div> ); } }); module.exports = React.createClass({ getInitialState: function () { return { isRequired: false } }, componentDidMount: function () { this.setState({ isRequired: true }); …

551 javascript  reactjs 

とき、それは合格することが重要であるpropsにsuper()、なぜ？ class MyComponent extends React.Component { constructor(props) { super(); // or super(props) ? } }

532 reactjs  ecmascript-6