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

私は初めてReact.jsをいじっていますが、クリックイベントを介してページ上の何かを表示または非表示にする方法を見つけることができません。ページに他のライブラリーをロードしていないので、Reactライブラリーを使用するネイティブな方法を探しています。これは私が今まで持っているものです。クリックイベントが発生したときに結果のdivを表示したいと思います。 var Search= React.createClass({ handleClick: function (event) { console.log(this.prop); }, render: function () { return ( <div className="date-range"> <input type="submit" value="Search" onClick={this.handleClick} /> </div> ); } }); var Results = React.createClass({ render: function () { return ( <div id="results" className="search-results"> Some Results </div> ); } }); React.renderComponent(<Search /> , document.body);

532 javascript  reactjs 

このエラーが発生しています： キャッチされないエラー：不変の違反：要素タイプが無効です：文字列（組み込みコンポーネントの場合）またはクラス/関数（複合コンポーネントの場合）が必要ですが、オブジェクト：を取得しました。 これは私のコードです： var React = require('react') var ReactDOM = require('react-dom') var Router = require('react-router') var Route = Router.Route var Link = Router.Link var App = React.createClass({ render() { return ( <div> <h1>App</h1> <ul> <li><Link to="/about">About</Link></li> </ul> </div> ) } }) var About = require('./components/Home') ReactDOM.render(( <Router> <Route path="/" component={App}> …

528 reactjs  react-router 

次のように、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 

React setStateは、呼び出されるたびにすべてのコンポーネントとサブコンポーネントを再レンダリングしますか？ もしそうなら、なぜですか？私は、状態が変化したときにReactが必要なだけレンダリングするだけだと考えていました。 次の単純な例では、onClickハンドラーが常にをstate同じ値に設定するため、後続のクリックで状態が変化しないにもかかわらず、テキストがクリックされたときに両方のクラスが再度レンダリングされます。 this.setState({'test':'me'}); レンダリングはstateデータが変更された場合にのみ発生することを期待していました。 JS Fiddleとしての例のコードと埋め込みスニペットは次のとおりです。 var TimeInChild = React.createClass({ render: function() { var t = new Date().getTime(); return ( <p>Time in child:{t}</p> ); } }); var Main = React.createClass({ onTest: function() { this.setState({'test':'me'}); }, render: function() { var currentTime = new Date().getTime(); return ( <div onClick={this.onTest}> <p>Time …

503 javascript  reactjs 

React.jsでデバウンスをどのように実行しますか？ handleOnChangeをデバウンスしたいのですが。 試してみましたdebounce(this.handleOnChange, 200)が動作しません。 function debounce(fn, delay) { var timer = null; return function() { var context = this, args = arguments; clearTimeout(timer); timer = setTimeout(function() { fn.apply(context, args); }, delay); }; } var SearchBox = React.createClass({ render: function() { return <input type="search" name="p" onChange={this.handleOnChange} />; }, handleOnChange: function(event) { …

496 javascript  reactjs 

現在、reduxタウンの最新の子供であるredux-saga / redux-sagaについての話はたくさんあります。アクションをリッスン/ディスパッチするためにジェネレーター関数を使用します。 頭redux-sagaをredux-thunk抱える前に、async / awaitで使用している以下のアプローチの代わりに、使用の賛否両論を知りたいと思います。 コンポーネントは次のようになります。通常どおりアクションをディスパッチします。 import { login } from 'redux/auth'; class LoginForm extends Component { onClick(e) { e.preventDefault(); const { user, pass } = this.refs; this.props.dispatch(login(user.value, pass.value)); } render() { return (<div> <input type="text" ref="user" /> <input type="password" ref="pass" /> <button onClick={::this.onClick}>Sign In</button> </div>); } } export …

488 javascript  reactjs  redux  redux-thunk  redux-saga 

2つのコンポーネントがあります。 親コンポーネント 子コンポーネント 親から子のメソッドを呼び出そうとしていましたが、この方法を試しましたが結果を取得できませんでした class Parent extends Component { render() { return ( <Child> <button onClick={Child.getAlert()}>Click</button> </Child> ); } } class Child extends Component { getAlert() { alert('clicked'); } render() { return ( <h1 ref="hello">Hello</h1> ); } } 親から子のメソッドを呼び出す方法はありますか？ 注：子コンポーネントと親コンポーネントは2つの異なるファイルにあります

474 javascript  reactjs 

私が設定しReact.jsた変数がの場合にのみレンダリングされるようにアプリを設定しようとしていますtrue。 私のレンダー関数の設定方法は次のようになります。 render: function() { var text = this.state.submitted ? 'Thank you! Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:'; var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {}; return ( <div> if(this.state.submitted==false) { <input type="email" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} …

467 javascript  reactjs  render 

state配列の最後に要素を追加したいのですが、これは正しい方法ですか？ this.state.arrayvar.push(newelement); this.setState({arrayvar:this.state.arrayvar}); 配列をインプレースで変更するpushと問題が発生するのではないかと心配しています-安全ですか？ アレイのコピーを作成し、setStateそれを無駄にすることの代替案。

416 javascript  reactjs 

__firebase_request_keyサーバーからのリダイレクト後にTwitterのシングルサインオンプロセスによって生成されたURLからパラメーター値をキャプチャするために、routes.jsxファイルでルートを定義するにはどうすればよいですか？ http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla 私は次のルート設定で試しましたが、 :redirectParamは上記のパラメータをキャッチしていません： <Router> <Route path="/" component={Main}> <Route path="signin" component={SignIn}> <Route path=":redirectParam" component={TwitterSsoButton} /> </Route> </Route> </Router>

412 reactjs  react-router 

この記事で説明するように、クリックイベントがコンポーネントの外部で発生したかどうかを検出する方法を探しています。jQuerynearest（）は、クリックイベントからのターゲットがその親の1つとしてdom要素を持っているかどうかを確認するために使用されます。一致がある場合、クリックイベントは子の1つに属しているため、コンポーネントの外部にあるとは見なされません。 したがって、私のコンポーネントでは、ウィンドウにクリックハンドラーをアタッチします。ハンドラーが起動したら、ターゲットをコンポーネントのdomの子と比較する必要があります。 クリックイベントには、イベントが移動したdomパスを保持しているように見える「path」などのプロパティが含まれています。何を比較するのか、どのように最適にトラバースするのかわからないので、誰かがすでにそれを巧妙なユーティリティ関数に入れている必要があると思います...いいえ？

410 javascript  dom  reactjs 

<select>メニューのReactコンポーネントでselected、アプリケーションの状態を反映するオプションの属性を設定する必要があります。 ではrender()、optionState状態の所有者からSortMenuコンポーネントに渡されます。オプション値はprops、JSONから渡されます。 render: function() { var options = [], optionState = this.props.optionState; this.props.options.forEach(function(option) { var selected = (optionState === option.value) ? ' selected' : ''; options.push( <option value={option.value}{selected}>{option.label}</option> ); }); // pass {options} to the select menu jsx ただし、JSXコンパイル時に構文エラーがトリガーされます。 これを行うと、構文エラーはなくなりますが、明らかに問題は解決しません。 var selected = (optionState === option.value) ? 'selected' : 'false'; …

403 javascript  reactjs 

React Nativeの公式Webサイトのチュートリアルに従っています。 以下を使用してプロジェクトをビルドします。 react-native run-ios エラーが発生します： Found Xcode project TestProject.xcodeproj xcrun: error: unable to find utility "instruments", not a developer tool or in PATH Command failed: xcrun instruments -s xcrun: error: unable to find utility "instruments", not a developer tool or in PATH ただし、.xcodeprojからアプリを実行すると、すべてが正常に動作します。 助言がありますか？

394 javascript  ios  reactjs  react-native  ios-simulator 

次のようにネストされたプロパティを使用して自分の状態を整理しようとしています： this.state = { someProperty: { flag:true } } しかし、このように状態を更新すると、 this.setState({ someProperty.flag: false }); 動作しません。これをどのように正しく行うことができますか？

390 javascript  reactjs  ecmascript-6  setstate 

取るに足らないReactサンプルページを作成した後、このエラーが発生します。 キャッチされないエラー：不変の違反：_registerComponent（...）：ターゲットコンテナーはDOM要素ではありません。 これが私のコードです： /** @jsx React.DOM */ 'use strict'; var React = require('react'); var App = React.createClass({ render() { return <h1>Yo</h1>; } }); React.renderComponent(<App />, document.body); HTML： <html> <head> <script src="/bundle.js"></script> </head> <body> </body> </html> これは何を意味するのでしょうか？

388 javascript  dom  reactjs