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

私はwebpackに非常に慣れていません。本番ビルドでは、コード全体のサイズを削減できることがわかりました。現在、webpackは約8MBのファイルをビルドし、main.jsは約5MBをビルドします。プロダクションビルドでコードのサイズを減らす方法は？インターネットからサンプルのwebpack構成ファイルを見つけ、アプリケーション用に構成し、実行npm run buildしてビルドを開始し、./dist/ディレクトリにいくつかのファイルを生成しました。 それでもこれらのファイルは重い（開発バージョンと同じ） これらのファイルを使用するには？現在、私はwebpack-dev-serverを使用してアプリケーションを実行しています。 package.jsonファイル { "name": "MyAPP", "version": "0.1.0", "description": "", "main": "src/server/server.js", "repository": { "type": "git", "url": "" }, "keywords": [ ], "author": "Iam", "license": "MIT", "homepage": "http://example.com", "scripts": { "test": "", "start": "babel-node src/server/bin/server", "build": "rimraf dist && NODE_ENV=production webpack --config ./webpack.production.config.js --progress --profile --colors" }, …

93 node.js  reactjs  npm  webpack  webpack-dev-server 

時々、リセットしたい、概念的にステートフルな反応コンポーネントがあります。理想的な動作は、古いコンポーネントを削除して、新しい初期のコンポーネントを読み取ることと同じです。 ReactはsetState、コンポーネント自身の明示的な状態を設定できるメソッドを提供しますが、ブラウザーのフォーカスやフォームの状態などの暗黙の状態を除外し、その子の状態も除外します。そのすべての間接的な状態をキャッチするのは難しい作業です。私は、驚くべき状態のすべての新しいビットでモグラを叩くよりも、厳密かつ完全にそれを解決することを好みます。 これを行うためのAPIまたはパターンはありますか？ 編集： 私は実証簡単な例作られたthis.replaceState(this.getInitialState())アプローチをし、それを対照的なthis.setState(this.getInitialState())アプローチ：jsfiddle - replaceStateより堅牢です。

93 reactjs 

一部のページのHTMLを調べていたところ、一部のページで次のように「data-reactid」属性が使用されていることに気付きました。 <a data-reactid="......" ></a> その属性とは何ですか？その機能は何ですか？

93 javascript  html  reactjs 

Reduxの代わりに新しいReactContext APIを使用して新しいアプリを開発しています。以前は、Reduxたとえばユーザーのリストを取得する必要があるときにcomponentDidMount、アクションを呼び出すだけでしたが、React Contextを使用すると、アクションは内部に存在します。レンダー関数内にあるコンシューマー。つまり、レンダー関数が呼び出されるたびに、アクションが呼び出されてユーザーリストが取得されますが、不必要なリクエストが多数行われるため、これは適切ではありません。 では、componentDidMountレンダーで呼び出す代わりに、アクションを1回だけ呼び出すにはどうすればよいですか？ 例として、次のコードを見てください。 次のProvidersように、すべてを1つのコンポーネントにラップしていると仮定します。 import React from 'react'; import UserProvider from './UserProvider'; import PostProvider from './PostProvider'; export default class Provider extends React.Component { render(){ return( <UserProvider> <PostProvider> {this.props.children} </PostProvider> </UserProvider> ) } } 次に、次のように、すべてのアプリをラップするこのプロバイダーコンポーネントを配置します。 import React from 'react'; import Provider from './providers/Provider'; import { Router } from './Router'; …

93 reactjs  react-context 

反応アプリを作成すると、デフォルトでServiceWorkerが呼び出されます。なぜサービスワーカーが使われるのですか？デフォルトの呼び出しの理由は何ですか？

93 javascript  reactjs  service-worker 

ここで<canvas>見つけたこのクールなアニメーションをReactの再利用可能なコンポーネントに変換しようとしています。このコンポーネントには、キャンバス用に1つの親コンポーネントが必要であり、。には多くの子コンポーネントが必要なようです。function Ball() パフォーマンス上の理由から、Ballsステートレスコンポーネントが多数あるため、ステートレスコンポーネントにする方がおそらく良いでしょう。私はステートレスコンポーネントの作成に精通しておらず、で定義されている関数this.update()とthis.draw関数をどこで定義すべきか疑問に思っていましたfunction Ball()。 ステートレスコンポーネントの関数は、コンポーネントの内部にありますか、それとも外部にありますか？言い換えれば、次のうちどれが良いですか？ 1： const Ball = (props) => { const update = () => { ... } const draw = () => { ... } return ( ... ); } 2： function update() { ... } function draw() { ... } const Ball = (props) => { …

93 reactjs 

私はReactでプロジェクトに取り組んでいて、困った問題に遭遇しました。 実行するたびにyarn start次のエラーが発生します。 TypeError [ERR_INVALID_ARG_TYPE]：「パス」引数は文字列型でなければなりません。未定義の受信タイプ なぜこれが起こっているのか私にはわかりません。誰かがこれを経験したことがあれば、感謝します。

92 javascript  reactjs  redux  visual-studio-code  yarnpkg 

次の問題の原因は何ですか？Android SDKのバージョンはサポートされていませんか？ Starting JS server... Building and installing the app on the device (cd android && gradlew.bat installDebug)... FAILURE: Build failed with an exception. * What went wrong: A problem occurred configuring project ':app'. > failed to find Build Tools revision 23.0.1

92 javascript  android  reactjs  react-native 

ボタン要素の無効化された属性を動的に含める/除外したいのですが。動的属性値の例はたくさんありますが、属性自体の例はありません。次のレンダリング機能があります。 render: function() { var maybeDisabled = AppStore.cartIsEmpty() ? "disabled" : ""; return <button {maybeDisabled}>Clear cart</button> } これは、「{」文字が原因で解析エラーをスローします。AppStore.cartIsEmpty（）の結果（ブール値）に基づいて無効化された属性を含めたり、除外したりするにはどうすればよいですか？

92 reactjs 

redux-thunkは、間違っている場合は私が知り、修正する限り、非同期関数をディスパッチし、アクション自体の値をデバッグするのに役立つミドルウェアですが、redux-promiseを使用すると、独自の関数を実装しないと非同期関数を作成できませんでしたアクションとしてのメカニズムは、プレーンオブジェクトのみをディスパッチするという例外をスローします。 これら2つのパッケージの主な違いは何ですか？単一のページ反応アプリで両方のパッケージを使用するメリットや、redux-thunkに固執することで十分なメリットはありますか？

92 reactjs  redux  redux-thunk  redux-promise 

私はそれを理解しようとするためにReduxのtodoの例を分解しています。mapDispatchToPropsディスパッチアクションを小道具としてマップできることを読んだので、addTodo.jsdispatch（addTodo（））を呼び出す代わりにmapDispatchToPropsを使用するように書き換えることを考えました。呼んだaddingTodo()。このようなもの： import React from 'react'; import {connect} from 'react-redux'; import addTodo from '../actions'; let AddTodo = ({addingTodo}) => { let input; return ( <div> <form onSubmit={e => { e.preventDefault() if (!input.value.trim()) { return } addingTodo(input.value) input.value = "" }}> <input ref={node => { input = node }} /> <button type="submit">Submit</button> …

92 javascript  reactjs  redux  react-redux 

私の反応コンポーネントでは、ajaxリクエストの進行中に単純なスピナーを実装しようとしています。ロードステータスを格納するために状態を使用しています。 何らかの理由で、以下のReactコンポーネントのコードはこのエラーをスローします マウントされたコンポーネントまたはマウントされたコンポーネントのみを更新できます。これは通常、マウントされていないコンポーネントでsetState（）を呼び出したことを意味します。これはノーオペレーションです。未定義のコンポーネントのコードを確認してください。 最初のsetState呼び出しを取り除くと、エラーはなくなります。 constructor(props) { super(props); this.loadSearches = this.loadSearches.bind(this); this.state = { loading: false } } loadSearches() { this.setState({ loading: true, searches: [] }); console.log('Loading Searches..'); $.ajax({ url: this.props.source + '?projectId=' + this.props.projectId, dataType: 'json', crossDomain: true, success: function(data) { this.setState({ loading: false }); }.bind(this), error: function(xhr, status, err) …

92 javascript  ajax  reactjs  state 

クラス名をreactコンポーネントに渡してスタイルを変更しようとしていますが、うまくいかないようです： class Pill extends React.Component { render() { return ( <button className="pill {this.props.styleName}">{this.props.children}</button> ); } } <Pill styleName="skill">Business</Pill> それぞれのスタイルを持つクラスの名前を渡すことで、ピルのスタイルを変更しようとしています。私はReactを初めて使用するので、これを正しい方法で行っていない可能性があります。ありがとう

92 javascript  reactjs 

React要素のインスタンスからReactコンポーネントによって公開されたメソッドを呼び出したいのですが。 例えば、これでjsfiddle。リファレンスalertMessageからメソッドを呼び出したいHelloElement。 追加のラッパーを記述せずにこれを実現する方法はありますか？ 編集（JSFiddleからコピーしたコード） <div id="container"></div> <button onclick="onButtonClick()">Click me!</button> var onButtonClick = function () { //call alertMessage method from the reference of a React Element! Something like HelloElement.alertMessage() console.log("clicked!"); } var Hello = React.createClass({displayName: 'Hello', alertMessage: function() { alert(this.props.name); }, render: function() { return React.createElement("div", null, "Hello ", this.props.name); } …

92 reactjs 

例：codepen var InputBox = React.createClass({ render: function() { return ( <input className="mainInput" value='Some something'></input> ) } });

92 javascript  select  input  reactjs