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

条件付きレンダリングを持つビューコンポーネントがあるとします。 render(){ if (this.state.employed) { return ( <div> <MyInput ref="job-title" name="job-title" /> </div> ); } else { return ( <div> <MyInput ref="unemployment-reason" name="unemployment-reason" /> <MyInput ref="unemployment-duration" name="unemployment-duration" /> </div> ); } } MyInputは次のようになります。 class MyInput extends React.Component { ... render(){ return ( <div> <input name={this.props.name} ref="input" type="text" value={this.props.value || null} …

103 javascript  reactjs 

Webpackのローダーとプラグインの違いは何ですか？ プラグインのドキュメントはただ言う： プラグインを使用して、通常Webpackのバンドルに関連する機能を追加します。 babelがjsx / es2015変換にローダーを使用することは知っていますが、他の一般的なタスク（たとえば、copy-webpack-plugin）が代わりにプラグインを使用しているようです。

103 javascript  reactjs  webpack 

クラスを使用せずに、reactの機能的なステートレスコンポーネントでPropTypeを使用するにはどうすればよいですか？ export const Header = (props) => ( <div>hi</div> )

103 javascript  reactjs  react-props  react-proptypes 

onclickイベントを実行しても状態が変化しないのはなぜですか。しばらく前に検索しましたが、onclick関数をコンストラクターにバインドする必要がありますが、それでも状態が更新されません。これが私のコードです： import React from 'react'; import Grid from 'react-bootstrap/lib/Grid'; import Row from 'react-bootstrap/lib/Row'; import Col from 'react-bootstrap/lib/Col'; import BoardAddModal from 'components/board/BoardAddModal.jsx'; import style from 'styles/boarditem.css'; class BoardAdd extends React.Component { constructor(props){ super(props); this.state = { boardAddModalShow: false } this.openAddBoardModal = this.openAddBoardModal.bind(this); } openAddBoardModal(){ this.setState({ boardAddModalShow: true }); // After setting …

103 javascript  reactjs  ecmascript-6 

Reactの現在のバージョンが実行時に開発か本番かを検出することは可能ですか？私はこのようなことをしたいです： if (React.isDevelopment) { // Development thing } else { // Real thing }

103 javascript  reactjs 

タイトルはそれをすべて言います。なぜcomponentDidMountDOMアクセスが必要なものに適しているのか理解していますが、AJAXリクエストは必ずしもまたは通常は必要ありません。 何ができますか？

102 reactjs 

IndexRouteとIndexLinkを使用する目的がわかりません。いずれの場合も、Aboutパスがアクティブ化されていない限り、以下のコードはHomeコンポーネントを最初に選択したようです。 <Route path="/" component={App}> <IndexRoute component={Home}/> <Route path="about" component={About}/> </Route> 対 <Route path="/" component={App}> <Route path="home" component={Home}/> <Route path="about" component={About}/> </Route> 最初のケースの利点/目的は何ですか？

102 javascript  reactjs  react-router  url-routing 

ReactのESLINTを事前構成することになっているeslint-config-airbnbをインストールしました。 デフォルトのエクスポートには、ECMAScript 6+とReactを含むすべてのESLintルールが含まれています。eslint、eslint-plugin-import、eslint-plugin-react、およびeslint-plugin-jsx-a11yが必要です。 私の.eslintrc構成を拡張します： { "extends": "eslint-config-airbnb", "env": { "browser": true, "node": true, "mocha": true }, "rules": { "new-cap": [2, { "capIsNewExceptions": ["List", "Map", "Set"] }], "react/no-multi-comp": 0, "import/default": 0, "import/no-duplicates": 0, "import/named": 0, "import/namespace": 0, "import/no-unresolved": 0, "import/no-named-as-default": 2, "comma-dangle": 0, // not sure why airbnb turned this on. …

102 javascript  reactjs  eslint  eslint-config-airbnb 

これが私のフォームとonClickメソッドです。キーボードのEnterボタンを押したときにこのメソッドを実行したいのですが。どうやって ？ 注意：jqueryは評価されません。 comment: function (e) { e.preventDefault(); this.props.comment({comment: this.refs.text.getDOMNode().value, userPostId:this.refs.userPostId.getDOMNode().value}) }, <form className="commentForm"> <textarea rows="2" cols="110" placeholder="****Comment Here****" ref="text" /><br /> <input type="text" placeholder="userPostId" ref="userPostId" /> <br /> <button type="button" className="btn btn-success" onClick={this.comment}>Comment</button> </form>

102 reactjs  reactjs-flux 

文字列の配列を表示するコンポーネントが1つあります。コードは次のようになります。 React.createClass({ render() { <div> this.props.data.map(t => <span>t</span>) </div> } }) 完全に正常に動作しています。つまり、props.data = ['tom'、 'jason'、 'chris'] の場合、ページに表示される結果はtomjasonchrisになります。 次に、すべての名前をコンマで結合したいので、コードを this.props.data.map(t => <span>t</span>).join(', ') ただし、レンダリング結果は[Object]、[Object]、[Object]です。 オブジェクトを解釈して、レンダリングされる反応コンポーネントになる方法がわかりません。なにか提案を ？

102 reactjs 

私はReact Routerを初めて使用し、ページをリダイレクトする方法が非常に多くあることを学びました。 使用する browserHistory.push("/path") import { browserHistory } from 'react-router'; //do something... browserHistory.push("/path"); 使用する this.context.router.push("/path") class Foo extends React.Component { constructor(props, context) { super(props, context); //do something... } redirect() { this.context.router.push("/path") } } Foo.contextTypes = { router: React.PropTypes.object } React Router v4にはとがthis.context.history.push("/path")ありthis.props.history.push("/path")ます。詳細：React Router v4で履歴をプッシュする方法 これらすべてのオプションに混乱しているのですが、ページをリダイレクトする最善の方法はありますか？

102 reactjs  redux  react-router 

iOSとAndroidの両方でReactNativeを使用してアプリを作成しましたListView。リストビューに有効なデータソースを入力すると、画面の下部に次の警告が出力されます。 警告：配列またはイテレータの各子には、一意の「キー」プロップが必要です。のrenderメソッドを確認してくださいListView。 この警告の目的は何ですか？メッセージの後、彼らはこのページにリンクします。そこでは、react nativeとは関係がなく、Webベースのreactjsとは関係のない完全に異なることが説明されています。 私のListViewは、次のステートメントで構築されています。 render() { var store = this.props.store; return ( <ListView dataSource={this.state.dataSource} renderHeader={this.renderHeader.bind(this)} renderRow={this.renderDetailItem.bind(this)} renderSeparator={this.renderSeparator.bind(this)} style={styles.listView} /> ); } 私のデータソースは次のようなもので構成されています。 var detailItems = []; detailItems.push( new DetailItem('plain', store.address) ); detailItems.push( new DetailItem('map', '') ); if(store.telefon) { detailItems.push( new DetailItem('contact', store.telefon, 'Anrufen', 'fontawesome|phone') ); } if(store.email) { detailItems.push( …

102 facebook  listview  reactjs  react-native 

Jestとreact-testing-libraryを使用するための単体テストを作成しているコンポーネントライブラリがあります。特定の小道具やイベントに基づいて、特定の要素がレンダリングされていないことを確認したいと思います。 getByText、getByTestIdなどがスローされreact-testing-library、要素が見つからない場合はエラーが発生し、expect関数が起動する前にテストが失敗します。 react-testing-libraryを使用して、jestに存在しないものをどのようにテストしますか？

102 reactjs  jestjs  react-testing-library 

ReactJSの新機能で、コンポーネントに画像をインポートしたいと思います。これらの画像はパブリックフォルダー内にあり、reactコンポーネントからフォルダーにアクセスする方法がわかりません。 何か案は ？ 編集 Bottom.jsまたはHeader.js内に画像をインポートしたい 構造フォルダーは次のとおりです。 私はwebpackを使用していません。したほうがいい ？ 編集2 画像やその他のアセットの読み込みにwebpackを使用したいと思います。したがって、configフォルダーには次のファイルがあります。 画像のパスを追加する必要がある場所と方法は？ ありがとう

102 javascript  reactjs 

このシンプルなhelloworldreactアプリをオンラインコースから作成しましたが、次のエラーが発生します。 構成オブジェクトが無効です。Webpackは、APIスキーマと一致しない構成オブジェクトを使用して初期化されています。-構成に不明なプロパティ「postcss」があります。これらのプロパティは有効です：object {amd？、bail？、cache？、context？、dependencies？、devServer？、devtool？、entry、externals？、loader？、module？、name？、node？、output？、performance？ 、plugins？、profile？、recordsInputPath？、recordsO utputPath？、recordsPath？、resolve？、resolveLoader？、stats？、target？、watch？、watchOptions？タイプミスの場合：修正してください。 ローダーオプションの場合：webpack 2では、構成でカスタムプロパティを使用できなくなりました。module.rulesのローダーオプションを介してオプションを渡すことができるように、ローダーを更新する必要があります。ローダーが更新されるまで、LoaderOptionsPluginを使用してこれらのオプションをローダーに渡すことができます：plugins：[new webpack.LoaderOptionsPlugin（{// test：/。xxx $ /、//これは一部のモジュールオプションにのみ適用できます：{postcss： ...}}）]-configuration.resolveに不明なプロパティ「root」があります。これらのプロパティは有効です：object {alias？、aliasFields？、cachePredicate？、descriptionFiles？、enforceExtension？、enforceModuleExtension？、extensions？、fileSystem？、mainFields？、mainFiles？、moduleExtensions？、modules？、plugins？、resolver？、symlinks ？、unsafeCache ？、useSyncFileSystemCalls？} --configuration.resolve.extensions [0]は空であってはなりません。 私のwebpackファイルは次のとおりです。 // work with all paths in a cross-platform manner const path = require('path'); // plugins covered below const { ProvidePlugin } = require('webpack'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); // …

102 reactjs  typescript  webpack