プログラミング reactjs

7

3つの異なるルートに同じコンポーネントを使用しています。 <Router> <Route path="/home" component={Home} /> <Route path="/users" component={Home} /> <Route path="/widgets" component={Home} /> </Router> それを組み合わせるためにとにかくありますか？ <Router> <Route path=["/home", "/users", "/widgets"] component={Home} /> </Router>

113 javascript reactjs path react-router url-routing

10

Reactで余分な<div>のラッピングを回避するにはどうすればよいですか？

今日、私はReactJSの学習を開始し、1時間後に問題に直面しました。ページのdiv内に2つの行を持つコンポーネントを挿入したいと思います。私はhtmlを持っています： <html> .. <div id="component-placeholder"></div> .. </html> このようなレンダリング関数： ... render: function() { return( <div className="DeadSimpleComponent"> <div className="DeadSimpleComponent__time">10:23:12</div > <div className="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div> </div> ) } .... そして以下ではレンダーと呼んでいます： ReactDOM.render(<DeadSimpleComponent/>, document.getElementById('component-placeholder')); 生成されたHTMLは次のようになります。 <html> .. <div id="component-placeholder"> <div class="DeadSimpleComponent"> <div class="DeadSimpleComponent__time">10:23:12</div> <div class="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div> </div> </div> .. </html> Reactがすべてを …

113 javascript reactjs

13

React-Router外部リンク

反応アプリでルートを処理するためにreact-routerを使用しているので、外部リソースにリダイレクトする方法があるかどうか知りたいです。誰かがヒットしたとしましょう： example.com/privacy-policy リダイレクトしたい： example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies 私はindex.htmlの読み込みでプレーンJSでそれを書くのを避けるのにまったくゼロのヘルプを見つけています： if ( window.location.path === "privacy-policy" ){ window.location = "example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies" }

113 javascript reactjs redirect react-router react-router-redux

13

useEffectの無限ループ

React 16.7-alphaの新しいフックシステムで遊んでいて、処理している状態がオブジェクトまたは配列の場合、useEffectで無限ループに陥ります。まず、useStateを使用して、次のような空のオブジェクトで開始します。 const [obj, setObj] = useState({}); 次に、useEffectで、setObjを使用して空のオブジェクトに再度設定します。2番目の引数として、オブジェクトのコンテンツが変更されていない場合に更新されないことを期待して、[obj]を渡します。しかし、それは更新し続けます。内容に関係なく、これらは常に異なるオブジェクトであるため、Reactは変化し続けると考えていますか？ useEffect(() => { setIngredients({}); }, [ingredients]); 配列についても同じことが言えますが、プリミティブとしては、予想どおりループに陥ることはありません。これらの新しいフックを使用して、コンテンツが変更されたかどうかを天気をチェックするときに、オブジェクトと配列をどのように処理する必要がありますか？

113 reactjs react-hooks

9

反応ルーターハッシュフラグメントからクエリパラメーターを取得する

クライアント側のアプリケーションで、reactおよびreact-routerを使用しています。次のようなURLから次のクエリパラメータを取得する方法がわかりません。 http://xmen.database/search#/?status=APPROVED&page=1&limit=20 私のルートは次のようになります（パスは完全に間違っています）。 var routes = ( <Route> <DefaultRoute handler={SearchDisplay}/> <Route name="search" path="?status=:status&page=:page&limit=:limit" handler={SearchDisplay}/> <Route name="xmen" path="candidate/:accountId" handler={XmenDisplay}/> </Route> ); 私のルートは正常に機能していますが、必要なパラメーターを取得するためにパスをフォーマットする方法がわかりません。これについての助けに感謝します！

112 javascript reactjs client-side react-router client-side-scripting

10

反応jsでonchangeイベントをトリガーする最良の方法は何ですか

Backbone + ReactJSバンドルを使用して、クライアント側のアプリを構築します。悪名高い依存に大きく依存しvalueLinkて、双方向バインディングのReactJSインターフェイスをサポートする独自のラッパーを介してモデルに値を直接伝達します。今私たちは問題に直面しました：我々は持っているjquery.mask.js、プログラムのでそれは火がイベントを反応しない入力値をフォーマットプラグインを。これはすべて、モデルがユーザー入力からフォーマットされていない値を受け取り、プラグインからフォーマットされた値を見落とす状況につながります。 Reactにはブラウザによってはたくさんのイベント処理戦略があるようです。Reactがそれを聞くことができるように、特定のDOM要素の変更イベントをトリガーする一般的な方法はありますか？

112 reactjs

7

その名前のタスクは既に存在するため、タスク「ラッパー」を追加できません

「react-native init AwesomeProject」をインストールすると、次のコマンドを実行するとこのエラーが発生しますreact-native run-android。 Could not determine java version from '11.0.1'. 簡単なグーグルは、私がdistributionUrlGradleラッパーで更新する必要があることを示唆しています。これを行った後、私は新しいエラーに直面しました： Cannot add task 'wrapper' as a task with that name already exists. 問題がファイルにあることを示唆しています： /AwesomeProject/android/build.gradle' line: 36 こんな感じ task wrapper(type: Wrapper) { gradleVersion = '4.4' distributionUrl = distributionUrl.replace("bin", "all") } 私はこれが何をしているのかを理解しようと、何度も行ってきました。箱から出してすぐに機能しないものがあるのは奇妙に思えます。誰かが同様の問題に直面していますか？

112 android reactjs react-native wrapper expo

10

<div>は<p>の子孫として表示できません

私はこれを見ています。それが不平を言っているのは謎ではありません： Warning: validateDOMnesting(...): <div> cannot appear as a descendant of <p>. See ... SomeComponent > p > ... > SomeOtherComponent > ReactTooltip > div. 私は著者のだSomeComponentとSomeOtherComponent。ただし、後者は外部依存関係（ReactTooltipからreact-tooltip）を使用しています。これが外部の依存関係である必要はないかもしれませんが、「自分の制御不能なコード」であるという議論をここで試すことができます。ネストされたコンポーネントが（一見）正常に動作している場合、この警告についてどの程度心配する必要がありますか？とにかくこれを変更するにはどうすればよいですか（外部依存関係を再実装したくない場合）？私がまだ気付いていないより良いデザインがあるかもしれませんか？完全を期すために、ここにの実装を示しSomeOtherComponentます。レンダリングするだけでthis.props.value、ホバーすると、「一部のツールチップメッセージ」と表示されるツールチップ： class SomeOtherComponent extends React.Component { constructor(props) { super(props) } render() { const {value, ...rest} = this.props; return <span className="some-other-component"> <a href="#" data-tip="Some tooltip …

112 reactjs

6

React入力テキストフィールドに入力できません

React.jsの最初のビットを試してみましたが、早い段階で困惑しています...以下のコードを使用すると、検索フォームがにレンダリングされ<div id="search"></div>ます。ただし、検索ボックスに入力しても何も起こりません。小道具と状態を上下に渡して何かが欠けていると思われますが、これは一般的な問題のようです。しかし、私は困惑しています-何が欠けているのかわかりません。 var SearchFacet = React.createClass({ handleChange: function() { this.props.onUserInput( this.refs.searchStringInput.value ) }, render: function() { return ( <div> Search for: <input type="text" value={this.props.searchString} ref="searchStringInput" onchange={this.handleChange} /> </div> ); } }); var SearchTool = React.createClass({ render: function() { return ( <form> <SearchFacet searchString={this.props.searchString} onUserInput={this.props.onUserInput} /> <button>Search</button> </form> ); } …

111 javascript reactjs

1

reduxを使用するときにthis.setState（）を使用する必要がありますか？

this.setState()reduxを使用するときに使用する必要がありますか？それとも、あなたは常に行動を派遣し、小道具に依存している必要がありますか？

111 reactjs flux redux

5

クラスベースのコンポーネントでReact.forwardRefを使用する方法

React.forwardRefを使用しようとしていますが、それをクラスベースのコンポーネント（HOCではない）で機能させる方法につまずきました。ドキュメントの例では、要素と機能コンポーネントを使用し、さらに高次コンポーネントのクラスを関数でラップしています。以下のようなものから始まるので、この自分でref.jsファイル： const TextInput = React.forwardRef( (props, ref) => (<input type="text" placeholder="Hello World" ref={ref} />) ); 代わりに、次のように定義します。 class TextInput extends React.Component { render() { let { props, ref } = React.forwardRef((props, ref) => ({ props, ref })); return <input type="text" placeholder="Hello World" ref={ref} />; } } または class TextInput …

111 javascript reactjs

7

ReactのJSX構文で二重中括弧の目的は何ですか？

react.jsチュートリアルから、二重中括弧のこの使用法がわかります。 <span dangerouslySetInnerHTML={{ __html: rawMarkup }} /> 次に、2番目のチュートリアル「Thinking in react」： <span style={{ color: 'red' }}> {this.props.product.name} </span>; ただし、React JSXのドキュメントでは、二重中括弧についての説明や言及はありません。この構文（二重中括弧）は何のためのものですか？そして、同じことをjsxで表現する別の方法はありますか、これは単なるドキュメントの省略ですか？

111 javascript reactjs

21

反応ルータは、すべての遷移で上にスクロールします

別のページに移動すると問題が発生します。その位置は以前のページと同じままです。したがって、自動的に上にスクロールすることはありません。window.scrollTo(0, 0)onChangeルーターでも使用してみました。この問題を修正するためにscrollBehaviorも使用しましたが、機能しませんでした。これについて何か提案はありますか？

111 javascript reactjs react-router react-router-redux

9

ReactJS：「Uncaught SyntaxError：Unexpected token <」

ReactJSでサイトの構築を開始しようとしています。しかし、JSを別のファイルに入れようとすると、「Uncaught SyntaxError：Unexpected token <」というエラーが発生し始めました。 /** @jsx React.DOM */JSファイルの先頭に追加してみましたが、何も修正されませんでした。以下は、HTMLファイルとJSファイルです。何がうまくいかないのかについてのアイデアはありますか？ HTML <html> <head> <title>Page</title> <script src="http://fb.me/react-0.12.2.js"></script> <script src="http://fb.me/JSXTransformer-0.12.2.js"></script> <script src="http://code.jquery.com/jquery-1.10.0.min.js"> </script> <script src="./lander.js"> </script> </head> <body> <div id="content"></div> <script type="text/jsx"> React.render( <Lander />, document.getElementById('content') ); </script> </body> </html> JS /** * @jsx React.DOM */ var Lander = React.createClass({ render: function () { …

110 javascript html reactjs react-jsx

3

Reactsの一方向データバインディングとAngularの双方向データバインディングの違いを誰かが説明できますか

AngularJSとReactJSで同じToDoアプリを完全に構築すると、AngularJSの双方向データバインディングに対してReact ToDoで一方向のデータバインディングが使用されるのはなぜですか？私はReactが次のように機能することを理解しています Render（data）---> UI。これはAngularとどう違うのですか？

109 javascript angularjs reactjs

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

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