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

Reactでは、オブジェクトを明確に作成して、インラインスタイルとして割り当てることができます。すなわち。後述します。 var divStyle = { color: 'white', backgroundImage: 'url(' + imgUrl + ')', WebkitTransition: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is the only lowercase vendor prefix }; var divStyle2 = {fontSize: '18px'}; React.render(<div style={divStyle}>Hello World!</div>, mountNode); 複数のオブジェクトを結合して一緒に割り当てるにはどうすればよいですか？

213 reactjs 

FacebookのReactJSの処理に問題があります。ajaxを実行してHTMLデータを表示したいときはいつでも、ReactJSはそれをテキストとして表示します。（下図参照） データは、jquery Ajaxの成功コールバック関数を介して表示されます。 $.ajax({ url: url here, dataType: "json", success: function(data) { this.setState({ action: data.action }) }.bind(this) }); これをhtmlに変換する簡単な方法はありますか？ReactJSを使用するにはどうすればよいですか？

212 javascript  jquery  ajax  reactjs 

Reactの学習に少し時間を費やした後、コンポーネント作成の2つの主要なパラダイムの違いを理解しました。 私の質問は、いつどちらを使用する必要があるのか​​、そしてその理由は何ですか？一方の利点ともう一方の利点は何ですか？ ES6クラス： import React, { Component } from 'react'; export class MyComponent extends Component { render() { return ( <div></div> ); } } 機能的： const MyComponent = (props) => { return ( <div></div> ); } そのコンポーネントによって操作される状態がないときはいつでも機能的だと思いますが、それはそれですか？ ライフサイクルメソッドを使用する場合は、クラスベースのコンポーネントを使用するのが最善だと思います。

212 javascript  reactjs  ecmascript-6  redux 

水平と垂直の両方でReactNativeのテキストを中央揃えにする方法は？ justifyContent = "center"およびalignItems = "center"が機能しないrnplay.orgにサンプルアプリケーションがあります。https： //rnplay.org/apps/AoxNKQ テキストは中央揃えにする必要があります。そして、なぜテキスト（黄色）と親コンテナの間に上部にマージンがあるのですか？ コード： 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, Image, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View style={styles.container}> <View style={styles.topBox}> <Text style={styles.headline}>lorem ipsum{'\n'}ipsum lorem lorem</Text> </View> <View style={styles.otherContainer}> </View> </View> ); } …

212 reactjs  flexbox  react-native 

次のように、子コンポーネントからその親にデータを送信しようとしています。 const ParentComponent = React.createClass({ getInitialState() { return { language: '', }; }, handleLanguageCode: function(langValue) { this.setState({language: langValue}); }, render() { return ( <div className="col-sm-9" > <SelectLanguage onSelectLanguage={this.handleLanguage}/> </div> ); }); そしてここに子コンポーネントがあります： export const SelectLanguage = React.createClass({ getInitialState: function(){ return{ selectedCode: '', selectedLanguage: '', }; }, handleLangChange: function (e) { …

212 reactjs 

私のプロジェクトはcreate-react-appに基づいています。npm startまたはyarn startデフォルトでポート3000でアプリケーションを実行し、package.jsonでポートを指定するオプションはありません。 この場合、どのようにして選択したポートを指定できますか？私はこのプロジェクトの2つを同時に（テストのために）実行したいと思います。1つはポートで3005、もう1つは3006

212 reactjs  npm 

で作業しているときに非常に混乱することがありReactます。 インターネットで利用できるサンプルはたくさんあり.jsますが、reactでファイルを使用しますが、他の多くのファイルを使用してい.jsxます。 私は.jsxファイルについて読みましたが、私の理解では、ファイル内にhtmlタグを書き込むことができますjavascript。しかし、同じことを.jsファイルに書き込むこともできます。 したがって、これら2つの拡張の間の実際の違いは何です.jsと.jsx？

211 reactjs  jsx 

子コンポーネントに2つの値を渡します。 表示するオブジェクトのリスト 削除機能。 私は.map（）関数を使用してオブジェクトのリストを表示しますが（reactチュートリアルページにある例のように）、そのコンポーネントのボタンはonClick関数をレンダリング時に起動します（レンダリング時に起動しないでください）。私のコードは次のようになります： module.exports = React.createClass({ render: function(){ var taskNodes = this.props.todoTasks.map(function(todo){ return ( <div> {todo.task} <button type="submit" onClick={this.props.removeTaskFunction(todo)}>Submit</button> </div> ); }, this); return ( <div className="todo-task-list"> {taskNodes} </div> ); } }); 私の質問はonClick、レンダリングで関数が起動するのはなぜですか？

209 javascript  reactjs  button  onclick  dom-events 

私は現在、React JSとReact Nativeフレームワークに取り組んでいます。途中、FacebookのFluxとReduxの実装について読んでいたときに、ImmutabilityまたはImmutable-JSライブラリに遭遇しました。 問題は、なぜ不変性がそれほど重要なのかということです。オブジェクトの変更の何が問題になっていますか？それは物事を単純にしませんか？ 例を挙げて、オープニング画面がニュースの見出しのリストビューである単純なニュースリーダーアプリを考えてみましょう。 最初に値を持つオブジェクトの配列と言うと、最初は操作できません。それは不変性の原則が言っていることですよね？（間違っている場合は修正してください。）しかし、更新する必要がある新しいNewsオブジェクトがある場合はどうなりますか？通常の場合は、オブジェクトを配列に追加するだけで済みます。この場合、どうすれば達成できますか？ストアを削除して再作成しますか？オブジェクトを配列に追加する方が安価な操作ではありませんか？

206 javascript  reactjs  functional-programming  immutability  immutable.js 

useEffectはフックがすべての変更で機能に渡され実行されます反応します。これは、必要なプロパティが変更された場合にのみ呼び出せるように最適化できます。 から初期化関数を呼び出し、componentDidMount変更時に再度呼び出さない場合はどうなりますか？エンティティをロードしたいとしますが、ロード関数はコンポーネントからのデータを必要としません。useEffectフックを使用してこれをどのように作成できますか？ class MyComponent extends React.PureComponent { componentDidMount() { loadDataOnlyOnce(); } render() { ... } } フックを使用すると、次のようになります。 function MyComponent() { useEffect(() => { loadDataOnlyOnce(); // this will fire on every change :( }, [...???]); return (...); }

205 javascript  reactjs  react-hooks 

Reactでは、これら2つの実装の間に実際の違いはありますか？一部の友人は、FirstComponentがパターンだと言っていますが、その理由はわかりません。レンダリングが1回だけ呼び出されるため、SecondComponentはより単純に見えます。 最初： import React, { PropTypes } from 'react' class FirstComponent extends React.Component { state = { description: '' } componentDidMount() { const { description} = this.props; this.setState({ description }); } render () { const {state: { description }} = this; return ( <input type="text" value={description} /> ); } } …

204 javascript  reactjs  components 

私はBootstrapが初めてで、この問題に悩まされています。入力フィールドがあり、1桁だけを入力するとすぐに関数from onChangeが呼び出されますが、整数が入力されているときにEnterキーを押すと、この関数が呼び出されます。検証関数でも同じ問題-呼び出しが早すぎます。 var inputProcent = React.CreateElement(bootstrap.Input, {type: "text", //bsStyle: this.validationInputFactor(), placeholder: this.initialFactor, className: "input-block-level", onChange: this.handleInput, block: true, addonBefore: '%', ref:'input', hasFeedback: true });

204 javascript  twitter-bootstrap  reactjs 

JSXでReact変数を使用してHTMLを挿入する必要があるReactで何かを構築しています。そのような変数を持つ方法はありますか： var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>'; そしてそれをreactに挿入してそのように動作させますか？ render: function() { return ( <div className="content">{thisIsMyCopy}</div> ); } 期待どおりにHTMLを挿入していますか？これをインラインで実行することができる反応関数、またはこれを機能させることを可能にするものを解析する方法について、私は何も見たり聞いたりしたことがありません。

203 javascript  html  frontend  reactjs  react-jsx 

ReactJSは初めてですが、これがうまくいかなくて申し訳ありません。受け取ったデータに従っていくつかのテーブル行を作成するコンポーネントがあります。 列内の各セルにはラジオチェックボックスがあります。したがって、ユーザーは既存の行から1つと1つsite_nameを選択できますaddress。選択はフッターに表示されます。そして、それは私が行き詰まっているところです。 var SearchResult = React.createClass({ render: function(){ var resultRows = this.props.data.map(function(result){ return ( <tbody> <tr> <td><input type="radio" name="site_name" value={result.SITE_NAME}>{result.SITE_NAME}</input></td> <td><input type="radio" name="address" value={result.ADDRESS}>{result.ADDRESS}</input></td> </tr> </tbody> ); }); return ( <table className="table"> <thead> <tr> <th>Name</th> <th>Address</th> </tr> </thead> {resultRows} <tfoot> <tr> <td>chosen site name ???? </td> <td>chosen address ????? </td> …

203 html  reactjs 

react.jsで特定のバーを選択するにはどうすればよいですか？ これは私のコードです： var Progressbar = React.createClass({ getInitialState: function () { return { completed: this.props.completed }; }, addPrecent: function (value) { this.props.completed += value; this.setState({ completed: this.props.completed }); }, render: function () { var completed = this.props.completed; if (completed < 0) { completed = 0 }; return (...); } このReactコンポーネントを使用したい： var …

203 javascript  reactjs  getelementbyid