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

ReactプロジェクトでTypeScriptを試してみると、このエラーが発生します。 Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ train_1: boolean; train_2: boolean; train_3: boolean; train_4: boolean; }'. No index signature with a parameter of type 'string' was found on type '{ train_1: boolean; train_2: boolean; train_3: boolean; train_4: boolean; …

98 reactjs  typescript 

中にプレーンオブジェクトのリストがあり、this.state.listそのリストを使用して子のリストをレンダリングするとします。オブジェクトを挿入する正しい方法は何this.state.listですか？ 以下は、this.stateドキュメントで言及されているように直接変更できないため、私がそれが機能すると思う唯一の方法です。 this._list.push(newObject): this.setState({list: this._list}); これは醜いようです。もっと良い方法はありますか？

97 javascript  reactjs 

フォームの送信doSomething()時に、デフォルトの投稿動作の代わりにしようとしています。 どうやらReactでは、onSubmitはフォームでサポートされているイベントです。ただし、次のコードを試すと、 var OnSubmitTest = React.createClass({ render: function() { doSomething = function(){ alert('it works!'); } return <form onSubmit={doSomething}> <button>Click me</button> </form>; } }); メソッドdoSomething()は実行されますが、その後、デフォルトのポスト動作が引き続き実行されます。 これは私のjsfiddleでテストできます。 私の質問：デフォルトの投稿動作を防ぐにはどうすればよいですか？

97 javascript  forms  form-submit  reactjs  onsubmit 

私はテキスト入力に書き込んでいるだけで、onChangeイベントでを呼び出すsetStateので、Reactは私のUIを再レンダリングします。問題は、テキスト入力が常にフォーカスを失うことです。そのため、文字ごとにもう一度フォーカスする必要があります：D。 var EditorContainer = React.createClass({ componentDidMount: function () { $(this.getDOMNode()).slimScroll({height: this.props.height, distance: '4px', size: '8px'}); }, componentDidUpdate: function () { console.log("zde"); $(this.getDOMNode()).slimScroll({destroy: true}).slimScroll({height: 'auto', distance: '4px', size: '8px'}); }, changeSelectedComponentName: function (e) { //this.props.editor.selectedComponent.name = $(e.target).val(); this.props.editor.forceUpdate(); }, render: function () { var style = { height: this.props.height + 'px' …

97 javascript  reactjs 

私はreact-routerを使用して反応アプリケーションに取り組んでいます。次のようなURLのプロジェクトページがあります。 myapplication.com/project/unique-project-id プロジェクトコンポーネントが読み込まれると、componentDidMountイベントからそのプロジェクトのデータリクエストがトリガーされます。2つのプロジェクトを直接切り替えると、次のようにIDのみが変更されるという問題が発生しています... myapplication.com/project/982378632 myapplication.com/project/782387223 myapplication.com/project/198731289 componentDidMountは再度トリガーされないため、データは更新されません。データ要求をトリガーするために使用する必要がある別のライフサイクルイベントや、この問題に取り組むための別の戦略はありますか？

97 reactjs  react-router 

この単純なことは簡単に達成できるはずですが、それがいかに複雑であるかについて、私は自分の髪を引き出しています。 私がやりたいのは、Reactコンポーネントのマウントとマウント解除をアニメーション化することだけです。これが私がこれまでに試したことと、それぞれの解決策が機能しない理由です： ReactCSSTransitionGroup -私はCSSクラスをまったく使用していません。すべてJSスタイルなので、これは機能しません。 ReactTransitionGroup-この下位レベルのAPIは優れていますが、アニメーションが完了したときにコールバックを使用する必要があるため、CSSトランジションを使用するだけでは機能しません。常にアニメーションライブラリがあり、次のポイントにつながります。 GreenSock-ライセンスは、ビジネスで使用するIMOには制限が多すぎます。 React Motion-これは素晴らしいようですが、 TransitionMotion私が必要とするものに対して非常に混乱し、過度に複雑です。 もちろん、マテリアルUIと同じように、要素はレンダリングされますが非表示のまま（left: -10000px）ですが、そのルートには行きたくありません。私はそれをハックだと考え、コンポーネントをアンマウントして、コンポーネントがクリーンアップされ、DOMが乱雑にならないようにします。 簡単なものが欲しいに実装。マウント時に、一連のスタイルをアニメーション化します。アンマウント時に、同じ（または別の）スタイルのセットをアニメーション化します。できました。また、複数のプラットフォームで高いパフォーマンスを発揮する必要があります。 ここでレンガの壁にぶつかった。何か足りないことがあり、これを行う簡単な方法がある場合は、お知らせください。

97 animation  reactjs  css-animations  greensock  react-motion 

ドラッグ可能な（つまり、マウスで再配置可能な）Reactコンポーネントを作成したいのですが、Reactコンポーネントには、グローバル状態と散在するイベントハンドラーが必ず含まれているようです。私のJSファイルにグローバル変数を使用して、それをダーティな方法で行うことができ、おそらくそれを素敵なクロージャーインターフェイスでラップすることもできますが、Reactとよりうまくメッシュする方法があるかどうかを知りたいです。 また、未加工のJavaScriptでこれを行ったことは一度もないので、特にReactに関連するすべてのコーナーケースを確実に処理できるように、エキスパートがそれを行う方法を確認したいと思います。 ありがとう。

97 javascript  reactjs 

ReactJSでクリックイベントを手動でトリガーするにはどうすればよいですか？ユーザーがelement1をクリックすると、inputタグのクリックが自動的にトリガーされます。 <div className="div-margins logoContainer"> <div id="element1" className="content" onClick={this.uploadLogoIcon}> <div className="logoBlank" /> </div> <input accept="image/*" type="file" className="hide"/> </div>

97 html  reactjs 

最近、私はFacebookJavaScriptライブラリReact.jsの機能と使用方法について多くのことを研究しています。多くの場合、JavaScriptの世界の残りの部分にその違い2つのプログラミングスタイルといえばときdeclarativeとimperativementionnedされています。 両方の違いは何ですか？

97 reactjs 

チェックボックスTSX（JSX）要素があります： <input type="checkbox" name={i.toString()} onClick={this.handleCheckboxClick} /> VS codeの助けを借りて、の入力パラメータータイプがであることthis.handleCheckboxClickがわかりましたMouseEvent<HTMLInputElement>。だから私はそれを実装しました： private handleCheckboxClick(event: MouseEvent<HTMLInputElement>) { ... } 次に[ts] Type 'MouseEvent' is not generic.、次の画像に示すように、次のようなエラーが表示されます。 私のパッケージのバージョン： "@types/react": "^15.0.29", "@types/react-dom": "^15.5.0", "react": "^15.6.1", "react-dom": "^15.6.1", "typescript": "^2.3.4", 何故ですか？

97 reactjs  typescript  events  types  jsx 

ReactJSを使用していますが、アプリの一部にきれいに印刷されたJSONが必要です。 次のようなJSONを取得します。これをブラウザーコンソールで{ "foo": 1, "bar": 2 }実行するとJSON.stringify(obj, null, 4)、かなり印刷されますが、この反応スニペットで使用すると、次のようになります。 render: function() { var json = this.getStateFromFlux().json; return ( <div> <JsonSubmitter onSubmit={this.onSubmit} /> { JSON.stringify(json, null, 2) } </div> ); }, のように見えるグロスJSONをレンダリングします"{ \"foo\" : 2, \"bar\": 2}\n"。 これらの文字を正しく解釈するにはどうすればよいですか？{{

97 javascript  json  reactjs  flux 

明らかな質問をしているとは信じられませんが、それでもコンソールログにエラーが表示されます。 コンソールに、ディレクトリ内にモジュールが見つからないと表示されますが、タイプミスがないか少なくとも10回チェックしました。とにかく、これがコンポーネントコードです。 ルートにヘッダーをレンダリングしたい import React, { Component } from 'react' import Header from './src/components/header/header' import logo from './logo.svg' import './App.css' class App extends Component { render() { return ( <Header/> ); } } export default App; これはHeaderコンポーネントです import React, { Component } from 'react' import ReactDOM from 'react-dom' import navBar …

97 javascript  reactjs 

Chrome拡張機能が 'manifest.json`を使用していることは知っていますが、ここでは他のものとしても使用されています。 内容- { "short_name": "React App", "name": "Create React App Sample", "icons": [ { "src": "favicon.ico", "sizes": "192x192", "type": "image/png" } ], "start_url": "./index.html", "display": "standalone", "theme_color": "#000000", "background_color": "#ffffff" } 値を変更するとページが更新されますが、何も変更されません。

97 reactjs  manifest  create-react-app 

私はReact.jsライブラリーを初めて使用し、いくつかのチュートリアルを検討していたところ、次のように遭遇しました。 this.setState this.replaceState 指定された説明はあまり明確ではありません（IMO）。 setState is done to 'set' the state of a value, even if its already set in the 'getInitialState' function. 同様に、 The replaceState() method is for when you want to clear out the values already in state, and add new ones. 私はthis.setState({data: someArray});それに続いてthis.replaceState({test: someArray});console.log を試しましたが、state今はとの両方dataを持っていることがわかりましたtest。 その後、私が試したthis.setState({data: someArray});が続きthis.setState({test: …

96 javascript  frontend  reactjs 

ReactJsは初めてです。これは私のコードです： var React = require('react'); var ReactDOM = require('react-dom'); var {Route, Router, IndexRoute, hashHistory} = require('react-router'); var Main = require('Main'); ReactDOM.render( <Router history={hashHistory}> <Route path="/" component={Main}></Route> </Router>, document.getElementById('app')); そしてそれをwebpackでコンパイルします。また、メインコンポーネントをエイリアスに追加しました。コンソールがこれらのエラーをスローし ます。これらのリンクも読みます。 React Routerが失敗したプロップ「履歴」、未定義 値が定義されていない場合、履歴を解決する必要があるとマークするにはどうすればよいですか？ React-Routerをアップグレードし、hashHistoryをbrowserHistoryに置き換える そしてウェブの周りの多くの検索、しかし私はこの問題を修正することができませんでした。React Routerはバージョン4です

96 reactjs  react-router