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

アクティブなクラスonClickを切り替えてCSSプロパティを変更する方法を理解しようとしています。 私は多くのアプローチを取り、多くのSOの答えを読みました。jqueryを使用すると比較的簡単ですが、reactでこれを行うことはできません。私のコードは以下の通りです。誰かが私がこれをどのように行うべきかアドバイスできますか？ アイテムごとに新しいコンポーネントを作成せずに、これを行うことは可能ですか？ class Test extends Component(){ constructor(props) { super(props); this.addActiveClass= this.addActiveClass.bind(this); } addActiveClass() { //not sure what to do here } render() { <div> <div onClick={this.addActiveClass}> <p>1</p> </div> <div onClick={this.addActiveClass}> <p>2</p> </div> <div onClick={this.addActiveClass}> <p>3</p> </div> </div> } }

96 javascript  reactjs 

React.jsとwebpackでウェブサイトを構築しました。 WebページでGoogleフォントを使用したいので、セクションにリンクを配置します。 Googleフォント <link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"> そしてCSSを設定する body{ font-family: 'Bungee Inline', cursive; } ただし、機能しません。 この問題を解決するにはどうすればよいですか？

95 reactjs  webpack  google-font-api 

この質問を投稿する前に、sqa stackexchangeで検索してみましたが、浅い投稿は見つかりませんでした。そこで、誰かが私を助けてくれるといいのですが。 反応コンポーネントのテストでシャローおよびレンダリングを使用する必要があるのはいつですか？airbnb docsに基づいて、私は2つの違いについていくつかの意見を述べました： シャローはコンポーネントを1つの単位としてテストするので、「親」コンポーネントに使用する必要があります。（例：テーブル、ラッパーなど） レンダーは子コンポーネント用です。 私がこの質問をした理由は、どちらを使用するべきかを判断するのに苦労しているためです（ドキュメントには非常によく似ていると記載されていますが）。 それで、特定のシナリオでどれを使用するかをどうやって知るのですか？

95 testing  meteor  reactjs  chai  enzyme 

ECMAScript 6とECMAScript 7の機能を、モバイルとWebの両方のアプリケーションで（Babelのおかげで）すでに使用しています。 最初のステップは明らかにECMAScript 6レベルへの移行でした。私は多くの非同期パターン、約束（本当に有望です）、ジェネレーター（なぜ*記号なのかわからない）などを学びました。これらのうち、約束は私の目的にかなりよく適合しました。そして、私は自分のアプリケーションでそれらをかなり使用しています。 これは、私が基本的なpromiseを実装した方法の例/疑似コードです。 var myPromise = new Promise( function (resolve,reject) { var x = MyDataStore(myObj); resolve(x); }); myPromise.then( function (x) { init(x); }); 時間が経つにつれ、ECMAScript 7の機能に出会いました。その1つはASYNC、AWAITキーワードと関数です。これらを組み合わせると、すばらしい不思議が起こります。私は私の約束のいくつかをに置き換え始めましたasync & await。彼らはプログラミングスタイルに大きな価値を加えているようです。 繰り返しますが、これは私の非同期のawait関数がどのように見えるかの疑似コードです- async function myAsyncFunction (myObj) { var x = new MyDataStore(myObj); return await x.init(); } var returnVal = await myAsyncFunction(obj); …

95 javascript  asynchronous  reactjs  async-await  promise 

この私のプロジェクト：https://github.com/kenpeter/my_hak_news、の直接のコピーであるhttps://github.com/grigio/HAgnostic-News。 Gitクローンhttps://github.com/kenpeter/my_hak_news、実行react-native run-android このエラーが発生しました： * What went wrong: Execution failed for task ':app:installDebug'. > com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Failed to finalize session : INSTALL_FAILED_UPDATE_INCOMPATIBLE: Package com.hagnosticnews signatures do not match the previously installed version; ignoring! 関連する問題：https：//github.com/grigio/HAgnostic-News/issues/1、私はさまざまな方法に従いますが、この問題を解決できません。

95 android  reactjs  react-native 

css-in-jsメソッドを使用してreactコンポーネントにクラスを追加するには、複数のコンポーネントを追加するにはどうすればよいですか？ クラス変数は次のとおりです。 const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap' }, spacious: { padding: 10 }, }); これが私がそれをどのように使用したかです： return ( <div className={ this.props.classes.container }> 上記は機能しますが、classNamesnpmパッケージを使用せずに両方のクラスを追加する方法はありますか？何かのようなもの： <div className={ this.props.classes.container + this.props.classes.spacious}>

95 css  reactjs  material-design  material-ui  jss 

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 

ネイティブハンドルにどのように反応するか、またはレスポンシブフォントをどのように実行するかを尋ねたいと思います。たとえば、iphone 4sではfontSize：14ですが、iphone6ではfontSize：18です。

95 ios  reactjs  react-native 

Reactは初めてでDATA、外部ファイルからJSON変数をインポートしようとしています。次のエラーが発生します： モジュール「./customData.json」が見つかりません 誰かが私を助けてくれますか？DATA変数が入っている場合は機能しますindex.jsが、外部JSONファイルにある場合は機能しません。 index.js import React, {Component} from 'react'; import ReactDOM from 'react-dom'; import customData from './customData.json'; import Profile from './components/profile'; import Hobbies from './components/hobbies'; class App extends Component { render() { return ( <div> <Profile name={this.props.profileData.name}imgUrl={this.props.profileData.imgURL} /> <Hobbies hobbyList={this.props.profileData.hobbyList}/> </div> ); } } ReactDOM.render(<App profileData={DATA}/>, document.querySelector('.container')); hobbies.js import React, …

95 javascript  json  reactjs 

reactを使用して単純なフォームを作成しようとしていますが、データをフォームのdefaultValueに適切にバインドすることが困難になっています。 私が探している行動はこれです： ページを開くと、テキスト入力フィールドにデータベースのAwayMessageのテキストが入力されているはずです。それが「サンプルテキスト」です データベースのAwayMessageにテキストがない場合は、テキスト入力フィールドにプレースホルダーを配置するのが理想的です。 ただし、現在、ページを更新するたびに[テキスト]入力フィールドが空白になっています。（入力に入力した内容は適切に保存され、保持されます。）これは、AwayMessageが空のオブジェクトである場合に入力テキストフィールドのhtmlが読み込まれますが、awayMessageが読み込まれたときに更新されないためです。また、フィールドのデフォルト値を指定できません。 わかりやすくするために一部のコードを削除しました（つまり、onToggleChange） window.Pages ||= {} Pages.AwayMessages = React.createClass getInitialState: -> App.API.fetchAwayMessage (data) => @setState awayMessage:data.away_message {awayMessage: {}} onTextChange: (event) -> console.log "VALUE", event.target.value onSubmit: (e) -> window.a = @ e.preventDefault() awayMessage = {} awayMessage["master_toggle"]=@refs["master_toggle"].getDOMNode().checked console.log "value of text", @refs["text"].getDOMNode().value awayMessage["text"]=@refs["text"].getDOMNode().value @awayMessage(awayMessage) awayMessage: (awayMessage)-> console.log "I'm saving", …

94 javascript  forms  reactjs  coffeescript  2-way-object-databinding 

別のビューにリダイレクトするためにreact-router（バージョン^ 1.0.3）を使用して簡単にしようとしていますが、ただ疲れてきました。 import React from 'react'; import {Router, Route, Link, RouteHandler} from 'react-router'; class HomeSection extends React.Component { static contextTypes = { router: PropTypes.func.isRequired }; constructor(props, context) { super(props, context); } handleClick = () => { console.log('HERE!', this.contextTypes); // this.context.location.transitionTo('login'); }; render() { return ( <Grid> <Row className="text-center"> <Col md={12} …

94 javascript  reactjs 

私は2つのコンポーネントを持っています： 子コンポーネントの状態を変更したい親コンポーネント： class ParentComponent extends Component { toggleChildMenu() { ????????? } render() { return ( <div> <button onClick={toggleChildMenu.bind(this)}> Toggle Menu from Parent </button> <ChildComponent /> </div> ); } } そして、子供コンポーネント： class ChildComponent extends Component { constructor(props) { super(props); this.state = { open: false; } } toggleMenu() { this.setState({ open: !this.state.open …

94 javascript  reactjs 

NavLinkの「activeClassName」と「activeStyle」を設定する機能のほかに、使用するために何らかの理由があるNavLinkを介してリンクあなたのサイト上で（ヘッダーやフッターにすなわちないメインNAV）非ナビゲーション要素上の他のルートへのリンクを作成する場合は、アクティブな状態/クラスを必要としませんか？

94 reactjs  react-router  react-router-v4 

プレゼンテーションコンポーネントをコンテナコンポーネントから分離しようとしています。私はとを持ってSitesTableいSitesTableContainerます。コンテナは、現在のユーザーに基づいて適切なサイトをフェッチするためのreduxアクションをトリガーする役割を果たします。 問題は、コンテナコンポーネントが最初にレンダリングされた後、現在のユーザーが非同期にフェッチされることです。これは、コンテナコンポーネントがcomponentDidMount、に送信するデータを更新する関数内のコードを再実行する必要があることを認識していないことを意味しますSitesTable。小道具（ユーザー）の1つが変更されたときに、コンテナーコンポーネントを再レンダリングする必要があると思います。これを正しく行うにはどうすればよいですか？ class SitesTableContainer extends React.Component { static get propTypes() { return { sites: React.PropTypes.object, user: React.PropTypes.object, isManager: React.PropTypes.boolean } } componentDidMount() { if (this.props.isManager) { this.props.dispatch(actions.fetchAllSites()) } else { const currentUserId = this.props.user.get('id') this.props.dispatch(actions.fetchUsersSites(currentUserId)) } } render() { return <SitesTable sites={this.props.sites}/> } } function mapStateToProps(state) { const user = …

94 reactjs  redux  react-redux 

このチュートリアルを使用して、ReactJSをレールで動作させようとしています。このエラーが発生します： Uncaught ReferenceError: React is not defined しかし、私は、ブラウザのコンソールでオブジェクトを反応させるのにアクセスすることができ 、私も追加公開/ DIST /ターボreact.min.js説明したように、ここも追加説明するようにapplication.js内の行を、この答えに運に。さらに、エラーが発生します。//= require components var React = require('react') Uncaught ReferenceError: require is not defined 誰かがこれを解決する方法について私に提案できますか？ [編集1] 参照用のソースコード： これは私のcomments.js.jsxファイルです： var Comment = React.createClass({ render: function () { return ( <div className="comment"> <h2 className="commentAuthor"> {this.props.author} </h2> {this.props.comment} </div> ); } }); var ready …

94 javascript  ruby-on-rails  reactjs