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

私はReactJSを使用しています。ユーザーがリンクをクリックすると、テキストをクリップボードにコピーしたいと思います。 Chrome 52を使用していますが、他のブラウザをサポートする必要はありません。 このコードでは、データがクリップボードにコピーされない理由がわかりません。（コードスニペットの起源はReddit投稿からのものです）。 私はこれを間違っていますか？誰かがreactjsを使用してクリップボードにコピーを実装する「正しい」方法があることを提案できますか？ copyToClipboard = (text) => { console.log('text', text) var textField = document.createElement('textarea') textField.innerText = text document.body.appendChild(textField) textField.select() document.execCommand('copy') textField.remove() }

147 javascript  reactjs  clipboard 

jQueryコンポーネントをReact.jsに変換しようとしていますが、問題の1つはforループに基づいてn個の要素をレンダリングすることです。 これは不可能であるか、または推奨されておらず、モデルに配列が存在する場合、それを使用することは完全に理にかなっていることを理解していますmap。それは問題ありませんが、配列がない場合はどうでしょうか？代わりに、レンダリングする要素の数に等しい数値がある場合、どうすればよいですか？ これが私の例です。階層レベルに基づいて、要素の前に任意の数のスパンタグを付けたいと思います。したがって、レベル3では、テキスト要素の前に3つのスパンタグが必要です。 JavaScriptでは： for (var i = 0; i < level; i++) { $el.append('<span class="indent"></span>'); } $el.append('Some text value'); これ、またはJSX React.jsコンポーネントで動作するようなものを取得できないようです。代わりに、以下を実行する必要がありました。最初に一時配列を正しい長さに構築し、次に配列をループしました。 React.js render: function() { var tmp = []; for (var i = 0; i < this.props.level; i++) { tmp.push(i); } var indents = tmp.map(function (i) { return ( …

145 javascript  jquery  reactjs  react-jsx 

React.jsで同等のAngularの$ watch関数は何ですか？ 状態の変化をリッスンし、getSearchResults（）のような関数を呼び出したいです。 componentDidMount: function() { this.getSearchResults(); }

143 javascript  reactjs 

以下のように見えますcomponentWillReceiveProps全く新しいライフサイクルメソッドの賛成で、今後のリリースで段階的に廃止される予定であるgetDerivedStateFromProps：静的getDerivedStateFromPropsを（） 。 調べてみるthis.propsとnextProps、のようにとを直接比較できないようになっていますcomponentWillReceiveProps。これを回避する方法はありますか？ また、オブジェクトを返すようになりました。私は戻り値が本質的にであると仮定するのは正しいthis.setStateですか？ 以下は私がオンラインで見つけた例です：状態はprops / stateから派生しました。 前 class ExampleComponent extends React.Component { state = { derivedData: computeDerivedState(this.props) }; componentWillReceiveProps(nextProps) { if (this.props.someValue !== nextProps.someValue) { this.setState({ derivedData: computeDerivedState(nextProps) }); } } } 後 class ExampleComponent extends React.Component { // Initialize state in constructor, // Or with a property initializer. …

142 javascript  reactjs  lifecycle 

ここに完全なコード：https : //gist.github.com/js08/0ec3d70dfda76d7e9fb4 こんにちは、 ビルド環境に基づいてデスクトップ用とモバイル用の異なるテンプレートを表示するアプリケーションがあります。 モバイルテンプレートのナビゲーションメニューを非表示にする必要がある場所で、開発に成功しました。 現在、proptypeを介してすべての値をフェッチし、正しくレンダリングする1つのテストケースを作成できます。 しかし、モバイルがナビゲーションコンポーネントをレンダリングしてはならない場合の単体テストケースの記述方法はわかりません。 試しましたが、エラーが発生しています...修正方法を教えてください。 以下のコードを提供します。 テストケース import {expect} from 'chai'; import React from 'react'; import TestUtils from 'react-addons-test-utils'; import {SportsTopPortion} from '../../../src/components/sports-top-portion/sports-top-portion.jsx'; require('../../test-utils/dom'); describe('"sports-top-portion" Unit Tests', function() { let shallowRenderer = TestUtils.createRenderer(); let sportsContentContainerLayout ='mobile'; let sportsContentContainerProfile = {'exists': 'hasSidebar'}; let sportsContentContainerAuthExchange = {hasValidAccessToken: true}; …

142 reactjs  mocha  redux 

私の反応とタイプスクリプトアプリでは、次を使用しますonChange={(e) => data.motto = (e.target as any).value}。 クラスの型を正しく定義するにはどうすればよいので、型システムをハックする必要はありませんanyか？ export interface InputProps extends React.HTMLProps<Input> { ... } export class Input extends React.Component<InputProps, {}> { } 私が置くtarget: { value: string };と私は得る： ERROR in [default] /react-onsenui.d.ts:87:18 Interface 'InputProps' incorrectly extends interface 'HTMLProps<Input>'. Types of property 'target' are incompatible. Type '{ value: string; }' …

142 reactjs  typescript  types  typescript-typings 

これに取り組む正しい方法は何ですか？ var Hello = React.createClass({ getInitialState: function() { return {total: 0, input1:0, input2:0}; }, render: function() { return ( <div>{this.state.total}<br/> <input type="text" value={this.state.input1} onChange={this.handleChange} /> <input type="text" value={this.state.input2} onChange={this.handleChange} /> </div> ); }, handleChange: function(e){ this.setState({ ??? : e.target.value}); t = this.state.input1 + this.state.input2; this.setState({total: t}); } }); React.renderComponent(<Hello />, …

141 javascript  reactjs  jsx 

Webパックを使用して、reactjsプロジェクトを管理しています。webpackでJavaScriptで画像をロードしたいfile-loader。以下はwebpack.config.jsです： const webpack = require('webpack'); const path = require('path'); const NpmInstallPlugin = require('npm-install-webpack-plugin'); const PATHS = { react: path.join(__dirname, 'node_modules/react/dist/react.min.js'), app: path.join(__dirname, 'src'), build: path.join(__dirname, './dist') }; module.exports = { entry: { jsx: './app/index.jsx', }, output: { path: PATHS.build, filename: 'app.bundle.js', }, watch: true, devtool: 'eval-source-map', relativeUrls: true, resolve: { …

141 javascript  reactjs  webpack 

問題 私はReactでアプリケーションを書いていますが、setState(...)後に呼び出される非常に一般的な落とし穴を回避できませんでしたcomponentWillUnmount(...)。 私は自分のコードを注意深く見て、いくつかの保護句を配置しようとしましたが、問題は解決せず、まだ警告を監視しています。 したがって、2つの質問があります。 スタックトレースから、どの特定のコンポーネントとイベントハンドラーまたはライフサイクルフックがルール違反の原因であるかをどのように把握しますか？ さて、私のコードはこの落とし穴を念頭に置いて書かれていて、すでにそれを防ごうとしているので、問題自体を修正する方法ですが、いくつかの基礎となるコンポーネントはまだ警告を生成しています。 ブラウザコンソール Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. in TextLayerInternal (created by Context.Consumer) in TextLayer …

141 javascript  reactjs  typescript  lodash  setstate 

最近、私はFacebookのReactフレームワークを見ました。「仮想DOM」という概念を使っていますが、私にはよくわかりませんでした。 仮想DOMとは何ですか？利点は何ですか？

140 javascript  reactjs 

私はReactJSで最初の一歩を踏み出し、親子間のコミュニケーションを理解しようとしています。私はフォームを作成しているので、フィールドをスタイリングするためのコンポーネントがあります。また、フィールドとチェックを含む親コンポーネントがあります。例： var LoginField = React.createClass({ render: function() { return ( <MyField icon="user_icon" placeholder="Nickname" /> ); }, check: function () { console.log ("aakmslkanslkc"); } }) var MyField = React.createClass({ render: function() { ... }, handleChange: function(event) { //call parent! } }) それを行う方法はありますか？そして私のロジックはreactjs "world"で良いのでしょうか？御時間ありがとうございます。

140 javascript  reactjs 

Reactはパフォーマンスの最適化のために、状態の更新を非同期でバッチで実行する可能性があることを知っています。したがって、を呼び出しsetStateた後に更新される状態を信頼することはできません。しかし、あなたはに反応信頼できるのと同じ順序で状態を更新setStateと呼ばれているため 同じコンポーネント？ 異なるコンポーネント？ 次の例のボタンをクリックすることを検討してください。 1. aがfalse、bがtrueである可能性はありますか？ class Container extends React.Component { constructor(props) { super(props); this.state = { a: false, b: false }; } render() { return <Button onClick={this.handleClick}/> } handleClick = () => { this.setState({ a: true }); this.setState({ b: true }); } } 2. aがfalseでbがtrueである可能性はありますか？ class SuperContainer extends React.Component …

139 javascript  reactjs  state  setstate 

componentDidMount()React Nativeで非同期関数として使用することは良い習慣ですか、それとも避けるべきですか？ AsyncStorageコンポーネントのマウント時にいくつかの情報を取得する必要がありますが、それを可能にする唯一の方法は、componentDidMount()関数を非同期にすることです。 async componentDidMount() { let auth = await this.getAuth(); if (auth) this.checkAuth(auth); } これに問題はありますか？この問題の他の解決策はありますか？

139 reactjs  asynchronous  react-native 

TypescriptとReactを使用しています。refが参照する反応ノードに関して静的型付けとインテリセンスを取得するために、refの使用方法を理解するのに問題があります。私のコードは次のとおりです。 import * as React from 'react'; interface AppState { count: number; } interface AppProps { steps: number; } interface AppRefs { stepInput: HTMLInputElement; } export default class TestApp extends React.Component<AppProps, AppState> { constructor(props: AppProps) { super(props); this.state = { count: 0 }; } incrementCounter() { this.setState({count: this.state.count + 1}); …

139 reactjs  typescript 

Djangoの新機能であり、ReactJSの新機能です。私はAngularJSとReactJSを調査してきましたが、ReactJSに決定しました。AngularJSが市場シェアを拡大​​しているにもかかわらず、AngularJSが人気を博しているようであり、ReactJSの方がピックアップが早いと言われています。 ジャンクを別にして、私はUdemyのコースを受講し始めました。いくつかのビデオの後、それがDjangoとどの程度うまく統合されているかを確認することが重要に思われました。それは必然的に立ち上がって実行しているだけで壁にぶつかったとき、私は数時間と夜の間私のホイールを回転させないように、どのような種類のドキュメントがそこにあるのですか？ pip私が出会った包括的なチュートリアルやパッケージは本当にありません。私が遭遇したいくつかは、pyreactたとえば、機能しなかったり、日付が付けられていました。 私が持っていたのは、ReactJSを完全に分離して扱うことだけでしたが、ReactJSコンポーネントをレンダリングするクラスとIDを考慮に入れました。別々のReactJSコンポーネントが単一のES5ファイルにコンパイルされたら、その単一のファイルをDjangoにインポートします。テンプレート。 Django Rest Frameworkが関係しているように聞こえますが、Djangoモデルからレンダリングすると、すぐに機能が停止すると思います。Reduxがこのすべてにどのように影響するかを確認するのに十分ではありません。 とにかく、誰もが共有したいDjangoとReactJSを使用している明確な方法がありますか？ とにかく、ドキュメントとチュートリアルはAngularJSとDjangoにとって豊富であるため、そのルートに進んでフロントエンドフレームワークを使い始めるのは魅力的です...最高の理由ではありません。

138 django  reactjs