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

私は環境としてCloud9.io ubuntu VM Online IDEを使用していますが、このエラーをトラブルシューティングすることで、アプリをWebpack開発サーバーで実行するだけに減らしました。 私はそれを起動します： webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT $ IPは、ホストアドレスを持つ変数です。$ PORTにはポート番号があります。 これらの変数はデフォルトのIPおよびポート情報を持っているため、Cloud 9にアプリをデプロイするときに使用するように指示されています。 サーバーが起動してコードをコンパイルします。問題ありませんが、インデックスファイルは表示されません。「無効なホストヘッダー」をテキストとして含む空白の画面のみ。 これはリクエストです： GET / HTTP/1.1 Host: store-client-nestroia1.c9users.io Connection: keep-alive Pragma: no-cache Cache-Control: no-cache Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 DNT: …

176 reactjs  webpack-dev-server  cloud9-ide  cloud9 

Reactの公式ドキュメントではそれが言及しています- Reactクラスのライフサイクルメソッドに精通している場合は、useEffectフックを、componentDidMount、componentDidUpdate、およびcomponentWillUnmountを組み合わせたものと考えることができます。 私の質問は- componentWillMount()ライフサイクルメソッドをフックで使用するにはどうすればよいですか？

176 javascript  reactjs  jsx  react-hooks 

私はを使用してReactプロジェクトで作業しておりcreate-react-app、プロジェクトを開始するには2つのオプションがあります。 最初の方法： npm run start次のpackage.jsonような定義で： "start": "react-scripts start", 2番目の方法： そして npm start これら2つのコマンドの違いは何ですか？そして、の目的は何react-scripts startですか？ 定義を見つけようとしましたが、名前のパッケージを見つけましたが、このコマンドの意味がわかりません。

175 reactjs  npm 

私はReact JSに非常に慣れていません。setStateの仕組みがよくわかりません。ReactとEasel JSを組み合わせて、ユーザー入力に基づいてグリッドを描画しています。これが私のJSビンです：http : //jsbin.com/zatula/edit?js,output これがコードです： var stage; var Grid = React.createClass({ getInitialState: function() { return { rows: 10, cols: 10 } }, componentDidMount: function () { this.drawGrid(); }, drawGrid: function() { stage = new createjs.Stage("canvas"); var rectangles = []; var rectangle; //Rows for (var x = 0; x < …

174 javascript  reactjs  setstate 

create-react-appパッケージでReactJSプロジェクトを作成しましたが、うまくいきましたが、webpackファイルと構成が見つかりません。 react-create-appはwebpackでどのように機能しますか？webpack構成ファイルは、デフォルトのインストールのどこにありますcreate-react-appか？プロジェクトのフォルダーに構成ファイルが見つかりません。 オーバーライド構成ファイルを作成していません。他の記事で構成設定を管理できますが、従来の構成ファイルを見つけたいです。

172 javascript  reactjs  webpack  ecmascript-6  create-react-app 

要素のinnerHTMLを設定することと、要素にdangerouslySetInnerHTMLプロパティを設定することとの「裏側」の違いはありますか？簡単にするために、適切にサニタイズしていると仮定します。 例： var test = React.createClass({ render: function(){ return ( <div contentEditable='true' dangerouslySetInnerHTML={{ __html: "Hello" }}></div> ); } }); 対 var test = React.createClass({ componentDidUpdate: function(prevProp, prevState){ this.refs.test.innerHTML = "Hello"; }, render: function(){ return ( <div contentEditable='true' ref='test'></div> ); } }); 上記の例よりも少し複雑なことをしていますが、全体的な考え方は同じです

171 javascript  html  reactjs 

このコードで： import React from 'react'; import { Link } from 'react-router'; import { View, NavBar } from 'amazeui-touch'; import * as Pages from '../components'; const { Home, ...Components } = Pages; 私はこのeslintエラーを受け取ります： 7:16 error Parsing error: Unexpected token .. Why? ここに私のeslint設定があります： { "extends": "airbnb", "rules": { /* JSX */ "react/prop-types": …

169 javascript  reactjs  eslint 

React JavaScriptは初めてです。入力フィールドが空のときにボタンを無効にしようとしています。このためのReactの最良のアプローチは何ですか？ 私は次のようなことをしています： <input ref="email"/> <button disabled={!this.refs.email}>Let me in</button> これは正しいです？ ある要素から別の要素へのデータの転送/チェックにも興味があるので、これは動的属性の複製だけではありません。

168 reactjs 

どうすればいいかわからない問題がありました。私の反応コンポーネントでは、データの長いリストと下部にいくつかのリンクを表示します。このリンクのいずれかをクリックした後、リンクの新しいコレクションをリストに入力し、一番上までスクロールする必要があります。 問題は- 新しいコレクションがレンダリングされた後にどのように一番上にスクロールするかです。 'use strict'; // url of this component is #/:checklistId/:sectionId var React = require('react'), Router = require('react-router'), sectionStore = require('./../stores/checklist-section-store'); function updateStateFromProps() { var self = this; sectionStore.getChecklistSectionContent({ checklistId: this.getParams().checklistId, sectionId: this.getParams().sectionId }).then(function (section) { self.setState({ section, componentReady: true }); }); this.setState({componentReady: false}); } var Checklist = React.createClass({ …

168 scroll  reactjs  render 

タイプに基づいてコンポーネントを動的にレンダリングしようとしています。 例えば： 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 

ReactとReduxを使用してwebappを開発しています。プロジェクトを開始したとき、次のようになりました。 Line 13: Unexpected use of 'location' no-restricted-globals Search for the keywords to learn more about each error. 私はそれを解決する方法について多くのことを検索しましたが、私が見つけた答えのどれも私を助けませんでしたので、スタックオーバーフローに頼りました。 誰かがこのエラーを修正する方法を知っていますか？私が得ることができるすべての助けに感謝します。

168 javascript  reactjs  react-router  eslint 

checked="checked"React でデフォルト値が割り当てられた後、チェックボックスの状態を更新するのに問題があります。 var rCheck = React.createElement('input', {type: 'checkbox', checked:'checked', value: true}, 'Check here'); を割り当てた後checked="checked"、チェック解除/チェックをクリックしてチェックボックスの状態を操作できません。

168 reactjs  checkbox 

フックを習得しようとしていますが、そのuseState方法によって混乱しました。配列の形で状態に初期値を割り当てています。のsetメソッドはuseState、spread(...)またはを使用しても機能しませんwithout spread operator。状態に設定したいデータを呼び出してフェッチする別のPCでAPIを作成しました。 これが私のコードです： import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom"; const StateSelector = () => { const initialValue = [ { category: "", photo: "", description: "", id: 0, name: "", rating: 0 } ]; const [movies, setMovies] = useState(initialValue); useEffect(() => { (async …

167 javascript  reactjs  react-hooks 

私は現在、React-Nativeチュートリアルを行っています。はじめにチュートリアルから始めました。そこでは、新しいreactネイティブプロジェクトを作成し、デバイスでプロジェクトを正常に実行することができました。 次に、Propsチュートリアルを開始し、コードスニペットをコピーしてプロジェクトを再度実行しようとしたところ、次のエラーメッセージが画面に表示されました。

166 javascript  facebook  reactjs  react-native 

ローカルディレクトリから画像を読み込んでreactjs img srcタグに含めるにはどうすればよいですか？ one.jpegコンポーネントと同じフォルダー内に呼び出される画像があり、両方<img src="one.jpeg" />と関数<img src={"one.jpeg"} />内で試しましたrenderが、画像が表示されません。また、webpack configプロジェクトは公式のcreate-react-appコマンドラインユーティリティで作成されているため、ファイルにアクセスできません。 更新：これは、で画像を最初にインポートしimport img from './one.jpeg'て内部img src={img}で使用する場合に機能しますが、インポートする画像ファイルが非常に多いため、の形式で使用しますimg src={'image_name.jpeg'}。

166 reactjs