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

APIの戻り値に基づいて何かを表示するフォームを作成する必要があります。私は次のコードで作業しています： class App extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { alert('A name was submitted: ' + this.state.value); //error here event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" value={this.state.value} onChange={this.handleChange} …

155 reactjs  typescript 

最近ローンチされたのは、iOSアプリのサンプルとドキュメントだけのネイティブ機能です。

154 android  reactjs  react-native 

これは、reactjsで未加工のHTMLをレンダリングする唯一の方法ですか？ // http://facebook.github.io/react/docs/tutorial.html // tutorial7.js var converter = new Showdown.converter(); var Comment = React.createClass({ render: function() { var rawMarkup = converter.makeHtml(this.props.children.toString()); return ( <div className="comment"> <h2 className="commentAuthor"> {this.props.author} </h2> <span dangerouslySetInnerHTML={{__html: rawMarkup}} /> </div> ); } }); 私はJSXで何かをマークアップするクールな方法があることを知っていますが、主に生のhtml（すべてのクラス、インラインスタイルなど）をレンダリングできることに興味があります。このような複雑なもの： <!-- http://getbootstrap.com/components/#dropdowns-example --> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" …

154 javascript  reactjs 

Typescriptを使用してコンポーネントのデフォルトプロパティ値を設定する方法がわかりません。 これはソースコードです： class PageState { } export class PageProps { foo: string = "bar"; } export class PageComponent extends React.Component<PageProps, PageState> { public render(): JSX.Element { return ( <span>Hello, world</span> ); } } そして、私がこのようなコンポーネントを使用しようとすると： ReactDOM.render(<PageComponent />, document.getElementById("page")); プロパティfooが見つからないというエラーが表示されます。デフォルト値を使用したい。またstatic defaultProps = ...、コンポーネントの内部で使用しようとしましたが、思ったように効果がありませんでした。 src/typescript/main.tsx(8,17): error TS2324: Property 'foo' is missing in type …

153 reactjs  typescript  tsx 

class PlayerControls extends React.Component { constructor(props) { super(props) this.state = { loopActive: false, shuffleActive: false, } } render() { var shuffleClassName = this.state.toggleActive ? "player-control-icon active" : "player-control-icon" return ( <div className="player-controls"> <FontAwesome className="player-control-icon" name='refresh' onClick={this.onToggleLoop} spin={this.state.loopActive} /> <FontAwesome className={shuffleClassName} name='random' onClick={this.onToggleShuffle} /> </div> ); } onToggleLoop(event) { // "this …

152 javascript  reactjs  this 

最後の文の意味と機能（デフォルトのHelloWorld;をエクスポート）を確認したいのですが、それに関するチュートリアルが見つかりません。 // hello-world.jsx import React from 'react'; class HelloWorld extends React.Component { render() { return <p>Hello, world!</p>; } } export default HelloWorld;

152 javascript  reactjs 

Prettier1.7.2とEslint1.7.0でvscodeを使用しています。私が得るすべての改行の後： [eslint] Delete 'cr' [prettier/prettier] これは.eslintrc.jsonです： { "extends": ["airbnb", "plugin:prettier/recommended"], "env": { "jest": true, "browser": true }, "rules": { "import/no-extraneous-dependencies": "off", "import/prefer-default-export": "off", "no-confusing-arrow": "off", "linebreak-style": "off", "arrow-parens": ["error", "as-needed"], "comma-dangle": [ "error", { "arrays": "always-multiline", "objects": "always-multiline", "imports": "always-multiline", "exports": "always-multiline", "functions": "ignore" } ], "no-plusplus": "off" }, "parser": …

152 reactjs  visual-studio-code  prettier  eslintrc 

これは、Google Adsenseアプリケーションページの例です。メインページの前に表示されるロード画面が後に表示されます。 Reactで同じことを行う方法がわかりません。Reactコンポーネントによってレンダリングされたロード画面を作成すると、ページがロードされている間は、DOMがレンダリングされるまで待機する必要があるため表示されません。 更新： 私は、スクリーンローダーを配置index.htmlしてReact componentDidMount()ライフサイクルメソッドで削除することで、私のアプローチの例を作成しました。 例とreact-loading-screen。

150 reactjs  asynchronous  redux 

React.JSを使用react-native run-androidしていますが、（デバイスを接続した状態で）使用すると、空白のページが表示されます。デバイスをシェイクDebug JS Remotelyしてオプションリストから選択すると、次の画面が表示されます。 ご参考までに： OS: Ubuntu 16.04 Node version is: v4.6.2 java version "1.8.0_111" react": "15.4.1 react-native": "0.38.0

149 android  reactjs  react-native 

私はcreate-react-appを使用しています。内のファイルからパブリックフォルダーの画像を呼び出そうとしていますsrc/components。このエラーメッセージが表示されます。 ./src/components/website_index.jsモジュールが見つかりません：プロジェクトのsrc /ディレクトリの外にある../../public/images/logo/WC-BlackonWhite.jpgをインポートしようとしました。src /以外の相対インポートはサポートされていません。src /内に移動するか、プロジェクトのnode_modules /からシンボリックリンクを追加できます。 import logo from '../../public/images/logo_2016.png'; <img className="Header-logo" src={logo} alt="Logo" /> パスへのインポートを実行できると多くのことを読みましたが、それでもまだ機能しません。どんな助けでも大歓迎です。このような質問がたくさんあることは知っていますが、ロゴや画像をインポートするように言われているので、全体像で何かが欠けています。

149 javascript  reactjs  webpack  create-react-app 

たとえば、rate、sendAmount、およびreceiveAmountの3つの入力があるとします。その3つの入力をuseEffect diffing paramsに配置しました。ルールは次のとおりです。 sendAmountが変更された場合、計算します receiveAmount = sendAmount * rate receiveAmountが変更された場合、計算します sendAmount = receiveAmount / rate レートを変更した場合、私は計算しreceiveAmount = sendAmount * rateたときsendAmount > 0または私が計算しsendAmount = receiveAmount / rateたときにreceiveAmount > 0 これがcodesandbox https://codesandbox.io/s/pkl6vn7x6jです問題を実証するです。 比較する方法があるoldValuesとnewValues上の好きは、componentDidUpdate代わりに、このような場合のために3つのハンドラを作るのは？ ありがとう これがhttps://codesandbox.io/s/30n01w2r06の私の最終的な解決策ですusePrevious この場合、useEffect変更ごとに同じネットワーク呼び出しが発生するため、複数を使用することはできません。そのため、私もchangeCount変更の追跡に使用しています。これchangeCountはローカルからの変更のみを追跡するのにも役立ちます。サーバーからの変更による不要なネットワーク呼び出しを防ぐことができます。

149 reactjs  react-hooks 

Reactルーターを使用すると、reactアプリで処理できます/arbitrary/route。これを機能させるには、一致するルートでReactアプリを送信するサーバーが必要です。 しかし、webpack開発サーバーは任意のエンドポイントを処理しません。 追加の高速サーバーを使用するソリューションがあります。 webpack-dev-serverがreact-routerからのエントリポイントを許可できるようにする方法 しかし、ルートマッチングを可能にするために別のExpressサーバーを起動したくありません。Webpack開発サーバーに任意のURLに一致するように伝え、反応アプリを送信したいだけです。お願いします。

148 reactjs  ecmascript-6  webpack  react-router 

JSBinでReactJSフレームワークをいじっています。 コンポーネント名が小文字で始まっていると機能しないことに気づきました。 たとえば、以下はレンダリングされません。 var fml = React.createClass({ render: function () { return <a href='google.com'>Go</a> } }); React.render(<fml />, document.body); しかし、すぐに私が代わるようfmlでFml、それはレンダリングありません。 タグを小文字で始めることができない理由はありますか？

148 javascript  reactjs 

私は簡単な問題のために反応フックを使用しようとしています const [personState,setPersonState] = useState({ DefinedObject }); 以下の依存関係があります。 "dependencies": { "react": "^16.8.6", "react-dom": "^16.8.6", "react-scripts": "3.0.0" } しかし、まだ次のエラーが発生します。 ./src/App.js 7行目： React Hook "useState"は、React関数コンポーネントでもカスタムReact Hook関数react-hooks / rules-of-hooksでもない関数 "app"で呼び出されます 39行目： 「状態」は定義されてい ません 各エラーの詳細については、キーワードを検索してください。 コンポーネントコードは次のとおりです。 import React, {useState} from 'react'; import './App.css'; import Person from './Person/Person'; const app = props => { const …

148 reactjs  react-hooks 

現在、reactjsを使用して単一ページアプリケーションを構築しています。localStorageを使用しない理由の多くはXSSの脆弱性によるものだと私は読んだ。Reactはすべてのユーザー入力をエスケープするので、localStorageを使用しても安全ですか？

147 reactjs  local-storage  jwt