タグ付けされた質問 「react-jsx」

一般的な方法で使用できるいくつかのコンポーネントを定義する適切な方法を見つけようとしています： <Parent> <Child value="1"> <Child value="2"> </Parent> もちろん、親と子のコンポーネント間のレンダリングのために行くの論理があり、あなたが想像できる<select>と<option>、このロジックの例としては。 これは質問のためのダミー実装です： var Parent = React.createClass({ doSomething: function(value) { }, render: function() { return (<div>{this.props.children}</div>); } }); var Child = React.createClass({ onClick: function() { this.props.doSomething(this.props.value); // doSomething is undefined }, render: function() { return (<div onClick={this.onClick}></div>); } }); 問題は{this.props.children}、ラッパーコンポーネントを定義するために使用するときはいつでも、すべての子にいくつかのプロパティをどのように渡すのですか？

889 javascript  reactjs  react-jsx 

変更をリッスンしたい外部（コンポーネント）の監視可能なオブジェクトがあります。オブジェクトが更新されると、変更イベントが発生し、変更が検出されたときにコンポーネントを再レンダリングします。 トップレベルではReact.renderこれが可能でしたが、コンポーネント内では機能しません（renderメソッドがオブジェクトを返すだけなので、これは理にかなっています）。 次にコード例を示します。 export default class MyComponent extends React.Component { handleButtonClick() { this.render(); } render() { return ( <div> {Math.random()} <button onClick={this.handleButtonClick.bind(this)}> Click me </button> </div> ) } } ボタンをクリックすると内部的にが呼び出されますがthis.render()、それが実際にレンダリングを発生させる原因ではありません（によって作成されたテキスト{Math.random()}は変更されないため、実際にこれを確認できます）。ただし、のthis.setState()代わりに単に呼び出すとthis.render()、正常に機能します。 だから私は私の質問だと思います： Reactコンポーネントは再レンダリングするために状態を持つ必要がありますか？状態を変更せずにコンポーネントをオンデマンドで更新する方法はありますか？

688 reactjs  react-jsx 

次のように、Reactクラス内でスタイルを指定できることを知っています。 var MyDiv = React.createClass({ render: function() { var style = { color: 'white', fontSize: 200 }; return <div style={style}> Have a good and productive day! </div>; } }); この方法ですべてのスタイリングを行うことを目指していて、CSSファイルでスタイルがまったく指定されていない必要がありますか？ または、インラインスタイルを完全に回避する必要がありますか？ 両方を少し行うのは奇妙で面倒です。スタイリングを微調整するときに2つの場所を確認する必要があります。

512 css  reactjs  inline-styles  react-jsx 

私はのフォームセクションを読んでいます反応ドキュメントとonChange使用方法を示すためにこのコードを試してみました（JSBIN）。 var React= require('react'); var ControlledForm= React.createClass({ getInitialState: function() { return { value: "initial value" }; }, handleChange: function(event) { console.log(this.state.value); this.setState({value: event.target.value}); console.log(this.state.value); }, render: function() { return ( <input type="text" value={this.state.value} onChange={this.handleChange}/> ); } }); React.render( <ControlledForm/>, document.getElementById('mount') ); <input/>ブラウザで値を更新するとconsole.log、handleChangeコールバック内の2番目valueが最初と同じように出力されますが、コールバックのスコープでconsole.log結果が表示さthis.setState({value: event.target.value})れないのはなぜhandleChangeですか？

326 javascript  reactjs  react-jsx 

私は、Reactコンポーネントにインラインスクリプトを追加しようとするという比較的単純な問題を抱えています。これまでのところ： 'use strict'; import '../../styles/pages/people.scss'; import React, { Component } from 'react'; import DocumentTitle from 'react-document-title'; import { prefix } from '../../core/util'; export default class extends Component { render() { return ( <DocumentTitle title="People"> <article className={[prefix('people'), prefix('people', 'index')].join(' ')}> <h1 className="tk-brandon-grotesque">People</h1> <script src="https://use.typekit.net/foobar.js"></script> <script dangerouslySetInnerHTML={{__html: 'try{Typekit.load({ async: true });}catch(e){}'}}></script> </article> …

266 javascript  reactjs  ecmascript-6  react-jsx 

オプションでJSXに要素を含めるにはどうすればよいですか？渡された場合にコンポーネント内にあるはずのバナーを使用した例を次に示します。回避したいのは、ifステートメントでHTMLタグを複製する必要があることです。 render: function () { var banner; if (this.state.banner) { banner = <div id="banner">{this.state.banner}</div>; } else { banner = ????? } return ( <div id="page"> {banner} <div id="other-content"> blah blah blah... </div> </div> ); }

229 javascript  reactjs  react-jsx 

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 

タイプに基づいてコンポーネントを動的にレンダリングしようとしています。 例えば： var type = "Example"; var ComponentName = type + "Component"; return <ComponentName />; // Returns <examplecomponent /> instead of <ExampleComponent /> ここで提案されたソリューションを試しましたReact / JSX動的コンポーネント名 コンパイル時にエラーが発生しました（gulpにbrowserifyを使用）。私は配列構文を使用していた場所でXMLを期待していました。 これを解決するには、すべてのコンポーネントのメソッドを作成します。 newExampleComponent() { return <ExampleComponent />; } newComponent(type) { return this["new" + type + "Component"](); } しかし、それは私が作成するすべてのコンポーネントの新しいメソッドを意味します。この問題に対するより洗練された解決策があるはずです。 私は提案に非常にオープンです。

168 javascript  reactjs  react-jsx 

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の探索を開始しました。 render() { return <div class="myApp"></div> } アプリを実行すると、次のエラーが発生します。 Warning: Unknown DOM property class. Did you mean className? これをに変更classすることで解決できclassNameます。 質問は; Reactはこの規約を強制しますか？また、なぜclassName従来の代わりに使用する必要があるのclassですか？これが制限である場合、それはJSX構文によるものですか、それとも他の場所によるものですか？

113 javascript  reactjs  react-jsx 

ReactJSでサイトの構築を開始しようとしています。しかし、JSを別のファイルに入れようとすると、「Uncaught SyntaxError：Unexpected token <」というエラーが発生し始めました。 /** @jsx React.DOM */JSファイルの先頭に追加してみましたが、何も修正されませんでした。以下は、HTMLファイルとJSファイルです。何がうまくいかないのかについてのアイデアはありますか？ HTML <html> <head> <title>Page</title> <script src="http://fb.me/react-0.12.2.js"></script> <script src="http://fb.me/JSXTransformer-0.12.2.js"></script> <script src="http://code.jquery.com/jquery-1.10.0.min.js"> </script> <script src="./lander.js"> </script> </head> <body> <div id="content"></div> <script type="text/jsx"> React.render( <Lander />, document.getElementById('content') ); </script> </body> </html> JS /** * @jsx React.DOM */ var Lander = React.createClass({ render: function () { …

110 javascript  html  reactjs  react-jsx 

私が実行しているファイル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 

JSXに空白を追加する方法（および理由）は理解していますが、ベストプラクティスは何か、または実際に違いがあるかどうか疑問に思っています。 両方の要素をスパンでラップします <div className="top-element-formatting"> <span>Hello </span> <span className="second-word-formatting">World!</span> </div> それらを1行で追加します <div className="top-element-formatting"> Hello <span className="second-word-formatting">World!</span> </div> JSでスペースを追加 <div className="top-element-formatting"> Hello {" "} <span className="second-word-formatting">World!</span> </div>

95 javascript  reactjs  react-jsx 

Sublime Textをテキストエディターとして使用しています。 JavaScriptファイルをフォーマットするためのjsFormatがありますが、JSX用のjsFormatが見つかりません。 どうやってJSXをフォーマットするのですか？

91 reactjs  sublimetext  react-jsx 

escapeプレス時にアクティブなreactブートストラップポップオーバーを閉じるためにバインドしたいです。コードは次のとおりです。 _handleEscKey:function(event){ console.log(event); if(event.keyCode == 27){ this.state.activePopover.hide(); } }, componentWillMount:function(){ BannerDataStore.addChangeListener(this._onchange); document.addEventListener("click", this._handleDocumentClick, false); document.addEventListener("keyPress", this._handleEscKey, false); }, componentWillUnmount: function() { BannerDataStore.removeChangeListener(this._onchange); document.removeEventListener("click", this._handleDocumentClick, false); document.removeEventListener("keyPress", this._handleEscKey, false); }, しかし、いずれかのキーを押しても、コンソールに何もログインしません。私はウィンドウでもそれをさまざまなケースで聴こうとしました。「keypress」、「keyup」などですが、何か間違ったことをしているようです。

86 reactjs  react-jsx  react-bootstrap