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

Reactjsを使用して、メニューコンポーネントを作成しています。 "use strict"; var React = require("react"); var Menus = React.createClass({ item_url: function (item,categories,articles) { console.log('afdasfasfasdfasdf'); var url='XXX'; if (item.type == 1) { url = item.categoryId == null ? 'javascript:void(0)' : path('buex_portal_browse_category', {slug: categories[item.categoryId].slug}); } else if (item.type == 2) { url = item.articleId == null ? 'javascript:void(0)' : path('buex_portal_view_article', …

101 javascript  reactjs  this  map-function 

私のチームと私は、エンタープライズレベルのWebアプリケーションの開発を開始するための資金を受け取りました（アプリケーションの機能の詳細には触れません）。アプリケーションには多くの個別のWebページがありますが、これらのページのうちの2つはより集中的で非常に重いです-多くのユーザー操作のように重い、大量のデータを表示するモーダル、WebSocket接続、チャットなど。 私はプロジェクトのチーフアーキテクトに割り当てられているので、最新のWebフレームワークについて調査しています。バックエンドについては、いくつかのテストを行い、Azure SQLプラットフォームを使用することを決定しました。これまでのところ、私はCore 2.0を使用したASP.NETに対して行われ、行われている改善を気に入っています。具体的には、ASP.NET MVCの以前のバージョンに対するRazorエンジン。 「新しい」Razor対Angular / Reactなどについて専門家の意見を聞きたかった。特にパフォーマンスに関心があります。Core 2.0 Razorはクライアント側のレンダリングフレームワークにどのように対応しますか？違いは無視できますか？私たちのアプリは、潜在的な1,000,000ユーザー（約100,000同時）をターゲットにしています。 前もって感謝します！

101 asp.net  angular  reactjs  razor 

このコードを念頭に置いて： var Component = React.createClass({ getInitialState: function () { return {position: 0}; }, componentDidMount: function () { setTimeout(this.setState({position: 1}), 3000); }, render: function () { return ( <div className="component"> {this.state.position} </div> ); } }); ReactDOM.render( <Component />, document.getElementById('main') ); 状態は3秒後にのみ変化するはずではありませんか？それはすぐに変わります。 ここでの主な目標は、3秒ごとに（を使用してsetInterval()）状態を変更することですが、機能しなかったため、も機能しませんでしたsetTimeout()。これに光はありますか？ありがとう！

101 javascript  reactjs 

私はtypescriptでcreate-react-appを使い始めました create-react-app my-app --scripts-version=react-scripts-ts また、デフォルトのtslint.json構成ではconsole.log（）は許可されていません。 （今のところ）console.logを有効にするにはどうすればよいですか？ このドキュメントは https://palantir.github.io/tslint/rules/no-console/にあります。しかし、彼らはこの行をどこに置くべきかについては言いません： "no-console": [true, "log", "error"] 私はこのtslint.json構成ファイルの構文を検索して見つけたので、これを試しました： "rules": { "no-console": [true, "warning"] } 単なる警告となるログメッセージを取得しようとしました。しかし、それはうまくいきませんでした。 私が持っているいくつかのconsole.log（）行をコメントアウトしましたが、将来これを実行できるようにしたいと考えています。

101 reactjs  typescript  create-react-app  tslint 

私はreact.jsの初心者です。サーバーからデータをフェッチして次のように使用する1つのコンポーネントを実装しました。 CallEnterprise:function(TenantId){ fetchData('http://xxx.xxx.xx.xx:8090/Enterprises?TenantId='+TenantId+' &format=json').then(function(enterprises) { EnterprisePerspectiveActions.getEnterprise(enterprises); }).catch(function() { alert("There was some issue in API Call please contact Admin"); //ComponentAppDispatcher.handleViewAction({ // actionType: MetaItemConstants.RECEIVE_ERROR, // error: 'There was a problem getting the enterprises' //}); }); }, Urlを構成ファイルに保存したいので、これをテストサーバーまたはプロダクションに展開したときに、jsファイルではなく構成ファイルのURLを変更する必要がありますが、react.jsで構成ファイルを使用する方法がわかりません 誰でも私にこれをどのように達成できるかを教えてくれますか？

101 javascript  reactjs  configuration  webpack  flux 

ReactJSの制御コンポーネントと非制御コンポーネントとは何ですか？それらはどのように互いに異なりますか？

101 reactjs  react-component 

基本的に、私はreactコンポーネントを持っており、そのrender()関数本体は次のとおりです:(これは私の理想的なコンポーネントです。つまり、現在は機能しません） render(){ return ( <div> <Element1/> <Element2/> // note: code does not work here if (this.props.hasImage) <MyImage /> else <OtherElement/> </div> ) }

101 reactjs 

私は今Reactを行っていますが、条件付きスタイリングを行う「正しい」方法があるかどうか疑問に思っていました。彼らが使用するチュートリアルでは style={{ textDecoration: completed ? 'line-through' : 'none' }} インラインスタイルを使用したくないので、代わりにクラスを使用して条件付きスタイルを制御したいと思います。Reactの考え方でこれにどのようにアプローチしますか？それとも、このインラインスタイリング方法を使用する必要がありますか？

101 javascript  reactjs 

PropTypesとFlowは同様のものをカバーしていますが、異なるアプローチを使用しています。PropTypesはランタイム中に警告を出すことができます。これは、サーバーなどから送られる不正な形式の応答をすばやく見つけるのに役立ちます。ただし、Flowは未来のようで、ジェネリックスのような概念は非常に柔軟なソリューションです。また、Nuclideが提供するオートコンプリートは、Flowにとって大きなプラスです。 私の質問は、新しいプロジェクトを始めるとき、どちらが最善の方法かということです。または、FlowとPropTypesの両方を使用することは良い解決策になるでしょうか？両方を使用する場合の問題は、重複するコードを大量に作成することです。これは私が書いた音楽プレーヤーアプリの例です。 export const PlaylistPropType = PropTypes.shape({ next: ItemPropTypes, current: ItemPropTypes, history: PropTypes.arrayOf(ItemPropTypes).isRequired }); export type Playlist = { next: Item, current: Item, history: Array<Item> }; どちらの定義にも基本的に同じ情報が含まれており、データ型が変更された場合は、両方の定義を更新する必要があります。 型宣言をPropTypesに変換するこのbabelプラグインを見つけました。これは解決策かもしれません。

100 reactjs  flowtype  react-proptypes 

これは基本的な質問ですが、他の場所で答えを見つけることができませんでした。 あるstore.dispatch同期または非同期でRedux？ 非同期の場合、アクションが伝播された後にコールバックを追加する可能性がありReactますか？

100 javascript  reactjs  redux  single-page-application 

私はまだReactでかなり新しいですが、ゆっくりと作業を続けており、行き詰まっていることに遭遇しました。 私はReactで「タイマー」コンポーネントを構築しようとしていますが、正直に言うと、これが正しく（または効率的に）行われているかどうかわかりません。以下の私のコードでは、私は、オブジェクトを返すように状態を設定{ currentCount: 10 }し、いじるされているcomponentDidMount、componentWillUnmountと、render私は唯一の10から9に「カウントダウン」に状態を得ることができます。 2つの部分からなる質問：何が問題になっていますか？そして、（componentDidMount＆を使用するよりも）setTimeoutを使用するより効率的な方法がありますcomponentWillUnmount）ますか？ 前もって感謝します。 import React from 'react'; var Clock = React.createClass({ getInitialState: function() { return { currentCount: 10 }; }, componentDidMount: function() { this.countdown = setInterval(this.timer, 1000); }, componentWillUnmount: function() { clearInterval(this.countdown); }, timer: function() { this.setState({ currentCount: 10 }); }, render: function() { var displayCount …

100 javascript  reactjs  settimeout  state 

単一行は正常に動作します render: function () { return ( {[1,2,3].map(function (n) { return <p>{n}</p> }} ); } 複数行ではありません render: function () { return ( {[1,2,3].map(function (n) { return ( <h3>Item {n}</h3> <p>Description {n}</p> ) }} ); } ありがとう。

100 reactjs 

this.setStateを複数回（説明のために2回）使用するとどうなるかを確認したいと思います。コンポーネントは2回レンダリングされると思いましたが、どうやら1回しかレンダリングされないようです。私が持っていたもう1つの期待は、おそらくsetStateの2番目の呼び出しが最初の呼び出しを実行することでしたが、あなたはそれを推測しました-うまくいきました。 JSfiddleへのリンク var Hello = React.createClass({ render: function() { return ( <div> <div>Hello {this.props.name}</div> <CheckBox /> </div> ); } }); var CheckBox = React.createClass({ getInitialState: function() { return { alex: 0 }; }, handleChange: function(event) { this.setState({ value: event.target.value }); this.setState({ alex: 5 }); }, render: function() { alert('render'); return …

100 javascript  reactjs 

React-Router v3からv4への移行に少し問題があります。v3では、どこでもこれを行うことができました。 import { browserHistory } from 'react-router'; browserHistory.push('/some/path'); これをv4で実現するにはどうすればよいですか。 withRouterあなたがコンポーネントにいるとき、私はその場で、反応コンテキスト、またはイベントルーターの小道具を使用できることを知っています。しかし、それは私には当てはまりません。 私はv4 のNavigatingOutsideOfComponentsと同等のものを探しています

100 reactjs  react-router 

私が実行しているファイルtest_stuff.jsがあります npm test それはほとんどこのように見えます： import { assert } from 'assert'; import { MyProvider } from '../src/index'; import { React } from 'react'; const myProvider = ( <MyProvider> </MyProvider> ); describe('Array', function() { describe('#indexOf()', function() { it('should return -1 when the value is not present', function() { assert.equal(-1, [1,2,3].indexOf(4)); }); }); …

100 javascript  reactjs  npm  react-jsx