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

プレーンな古いJavaScriptで私はDIVを持っています <div class="movie" id="my_movie"> および次のJavaScriptコード var myMovie = document.getElementById('my_movie'); myMovie.addEventListener('nv-enter', function (event) { console.log('change scope'); }); これで、このコンポーネント内のrenderメソッドにReactコンポーネントがあり、divを返します。カスタムイベントのイベントリスナーを追加するにはどうすればよいですか？（私はこのライブラリをTVアプリに使用しています-ナビゲーション） import React, { Component } from 'react'; class MovieItem extends Component { render() { if(this.props.index === 0) { return ( <div aria-nv-el aria-nv-el-current className="menu_item nv-default"> <div className="indicator selected"></div> <div className="category"> <span className="title">{this.props.movieItem.caption.toUpperCase()}</span> </div> …

89 reactjs 

私の目標は、ページ/親コンポーネントにコンポーネントを動的に追加することです。 私はこのようないくつかの基本的なサンプルテンプレートから始めました： main.js： var App = require('./App.js'); var SampleComponent = require('./SampleComponent.js'); ReactDOM.render(<App/>, document.body); ReactDOM.render(<SampleComponent name="SomeName"/>, document.getElementById('myId')); App.js： var App = React.createClass({ render: function() { return ( <div> <h1>App main component! </h1> <div id="myId">myId div</div> </div> ); } }); SampleComponent.js： var SampleComponent = React.createClass({ render: function() { return ( <div> <h1>Sample …

89 javascript  reactjs  babeljs 

何かを誤解したかもしれませんが、再レンダリングが発生するたびにuseCallbackフックが実行されます。 useCallbackの2番目の引数として入力を渡しました-変更できない定数-しかし、返されたメモ化されたコールバックは、すべてのレンダリングで高価な計算を実行します（確かに-以下のスニペットで自分で確認できます）。 useCallbackをuseMemoに変更しました。useMemoは期待どおりに機能します。渡された入力が変更されると実行されます。そして、本当に高価な計算を覚えています。 実例： 'use strict'; const { useState, useCallback, useMemo } = React; const neverChange = 'I never change'; const oneSecond = 1000; function App() { const [second, setSecond] = useState(0); // This 👇 expensive function executes everytime when render happens: const calcCallback = useCallback(() => expensiveCalc('useCallback'), [neverChange]); const …

89 reactjs 

私は通常、スタックにコード関連のものを投稿しますが、これはコミュニティの一般的な考えについての質問です。 データ/状態を管理するためにReactでReduxを使用することを主張する人はたくさんいるようですが、両方を読んで学習しているときに、見た目がよくないものに遭遇しました。 戻ってきた このページの下部：http : //redux.js.org/docs/basics/UsageWithReact.html（ストアを渡す）では、React 'Context'の "Magic"を使用することをお勧めします。 1つのオプションは、それを小道具としてすべてのコンテナーコンポーネントに渡すことです。ただし、コンポーネントがコンポーネントツリーの深いところにコンテナをレンダリングするだけで、プレゼンテーションコンポーネントを介してストアをワイヤリングする必要があるので、面倒です。 私たちが推奨するオプションは、すべてのコンテナーコンポーネントがストアを魔法のように利用できるようにするために呼び出される特別なReact Reduxコンポーネントを使用することです... 反応する React Contextページ（https://facebook.github.io/react/docs/context.html）の上部に警告があります。 コンテキストは高度で実験的な機能です。APIは将来のリリースで変更される可能性があります。 次に下部に： 明確なコードを書くときにグローバル変数を回避するのが最善であるのと同じように、ほとんどの場合、コンテキストの使用を避けるべきです... コンポーネントを介してモデルデータを渡すためにコンテキストを使用しないでください。ツリーを介してデータを明示的にスレッド化することは、理解がはるかに簡単です... そう... Reduxでは、store「props」を介して各コンポーネントに「」を渡すのではなく、Reactの「コンテキスト」機能を使用することをお勧めします。Reactは反対を推奨しますが。 また、Dan Abramov（Reduxの作成者）がFacebook（Reactの作成者）で働いているようです。 私はこのすべてを正しく読んでいますか？ この問題に関する現在の一般的なコンセンサスは何ですか？

88 javascript  reactjs  redux 

これが数字です min + gzip 26k gzip 90k オリジナルの450+ k そして、Reactのドキュメントには多くの機能がありません。なんでこんなに大きいの？ 軽量DOMの実装だと感じています。しかし、私は確信したいです。

88 reactjs 

私は次の構文で問題を理解するのに苦労しています： export const sendVerificationEmail = async () => (dispatch) => { try { dispatch({ type: EMAIL_FETCHING, payload: true }); await Auth.sendEmailVerification(); dispatch({ type: EMAIL_FETCHING, payload: false })) } catch (error) { dispatch({ type: EMAIL_FETCHING, payload: false }); throw new Error(error); } }; 私は次のようにエラーを受け取り続けます： awaitは予約語です ...しかし、非同期関数内では合法ではありませんか？ ディスパッチビットはreact-thunkライブラリから来ています。

88 javascript  reactjs  async-await  redux 

ListViewとは異なり、this.state.datasourceを更新できます。FlatListを更新または再レンダリングする方法や例はありますか？ 私の目標は、ユーザーがボタンを押したときにテキスト値を更新することです... renderEntries({ item, index }) { return( <TouchableHighlight onPress={()=> this.setState({value: this.state.data[index].value+1})> <Text>{this.state.data[index].value}</Text> </TouchableHighlight> ) } <FlatList ref={(ref) => { this.list = ref; }} keyExtractor={(item) => item.entry.entryId} data={this.state.data} renderItem={this.renderEntries.bind(this)} horizontal={false} />

88 reactjs  react-native  react-native-flatlist 

レデューサーがあります。新しい状態を計算するには、アクションからのデータと、このレデューサーによって管理されていない状態の一部からのデータが必要です。具体的には、以下に示すレデューサーで、accountDetails.stateOfResidenceIdフィールドにアクセスする必要があります。 initialState.js： export default { accountDetails: { stateOfResidenceId: '', accountType: '', accountNumber: '', product: '' }, forms: { blueprints: [ ] } }; formsReducer.js： import * as types from '../constants/actionTypes'; import objectAssign from 'object-assign'; import initialState from './initialState'; import formsHelper from '../utils/FormsHelper'; export default function formsReducer(state = initialState.forms, action) { …

88 javascript  reactjs  redux 

サーバーからトークン認証を取得しているので、Reduxアプリが最初に読み込まれたときに、このサーバーにリクエストを送信して、ユーザーが認証されているかどうかを確認する必要があります。認証されている場合は、トークンを取得する必要があります。 ReduxコアのINITアクションの使用は推奨されていないことがわかりました。アプリがレンダリングされる前に、アクションをディスパッチするにはどうすればよいですか？

88 reactjs  redux 

2週間触れなかったプロジェクトがあります。私はそれを取り戻し、今実行しようとするnpm startとこのエラーが発生しました。 > react-scripts start sh: react-scripts: command not found npm ERR! Darwin 16.0.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start" npm ERR! node v6.7.0 npm ERR! npm v3.10.3 npm ERR! file sh npm ERR! code ELIFECYCLE npm ERR! errno ENOENT npm ERR! syscall spawn npm ERR! UpScore@0.6.0 start: `react-scripts start` …

88 javascript  reactjs  create-react-app 

私はとを使用ReactしESLintていeslint-plugin-reactます。 私はしたい1つのファイルにルール。disableprop-types var React = require('react'); var Model = require('./ComponentModel'); var Component = React.createClass({ /* eslint-disable react/prop-types */ propTypes: Model.propTypes, /* eslint-enable react/prop-types */ render: function () { return ( <div className="component"> {this.props.title} </div> ); } });

88 reactjs  eslint 

https://github.com/moroshko/react-autosuggestから例を実装してい ます 重要なコードは次のとおりです。 import React, { Component } from 'react'; import suburbs from 'json!../suburbs.json'; function getSuggestions(input, callback) { const suggestions = suburbs .filter(suburbObj => suburbMatchRegex.test(suburbObj.suburb)) .sort((suburbObj1, suburbObj2) => suburbObj1.suburb.toLowerCase().indexOf(lowercasedInput) - suburbObj2.suburb.toLowerCase().indexOf(lowercasedInput) ) .slice(0, 7) .map(suburbObj => suburbObj.suburb); // 'suggestions' will be an array of strings, e.g.: // ['Mentone', 'Mill Park', …

87 javascript  json  reactjs  webpack 

reactjsES6標準を使用webpackして作成されたアプリがあり、それを作成するために使用しています。webpackロードjsモジュールを使用してbabel-loader。具体的には、次のバージョンのパッケージを使用します。 ├── babel@5.8.34 ├── babel-core@5.8.34 ├── babel-loader@5.4.0 └── webpack@1.12.6 ただし、ビルド後、IE10では次のエラーが発生します'Symbol' is undefined。babelを定義することになっているべきではありませんSymbolか？それを機能させるために特定の構成がありますか、webpackまたはbabel設定する必要がありますか？で{stage: 0}構成を使用します.babelrc。 どんな助けでもいただければ幸いです、ありがとう！

87 reactjs  webpack  babeljs 

私はInternetExplorerでReact.jsアプリケーションをテストしてきましたが、ES6 / 7コードのようにArray.prototype.includes()壊れていることがわかりました。 私はcreate-react-appを使用していますが、誰もが必要としているわけではないため、多くのポリフィルを含めないことを選択したようです。また、ビルド時間が遅くなります（たとえば、こことここを参照）。ドキュメント（執筆時点）は次のことを示唆しています。 ランタイムサポートが必要な他のES6 +機能（Array.from（）やSymbolなど）を使用する場合は、適切なポリフィルを手動で含めるか、対象のブラウザーがすでにそれらをサポートしていることを確認してください。 だから... 「手動で」それらを含めるための最良の方法は何ですか？

87 javascript  reactjs  ecmascript-6  create-react-app  ecmascript-7 

＆などの文字を含む可能性のある文字列を持つ小道具がいくつかあります。スペースも含まれています。すべてのスペースを 。に置き換えたい。 これを行う簡単な方法はありますか？この構文を使用してレンダリングすることはできないことに注意してください。 <div dangerouslySetInnerHTML={{__html: myValue}} /> 最初にHTMLエンティティをマークアップに置き換える必要があるためです。私はこれをする必要はありません、それは低すぎるレベルのようです。 これを行う方法はありますか？

87 html  reactjs