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

多くのテンプレート言語には、「スロット」または「yield」ステートメントがあります。これにより、ある種の制御を逆にして、あるテンプレートを別のテンプレート内にラップすることができます。 Angularには「トランスクルード」オプションがあります。 Railsにはyieldステートメントがあります。React.jsにyieldステートメントがある場合、次のようになります。 var Wrapper = React.createClass({ render: function() { return ( <div className="wrapper"> before <yield/> after </div> ); } }); var Main = React.createClass({ render: function() { return ( <Wrapper><h1>content</h1></Wrapper> ); } }); 望ましい出力： <div class="wrapper"> before <h1>content</h1> after </div> 残念ながら、React.jsにはがありません<yield/>。同じ出力を実現するためにWrapperコンポーネントをどのように定義しますか？

187 javascript  template-engine  composition  reactjs  transclusion 

休業。この質問は意見に基づいています。現在、回答を受け付けていません。 この質問を改善してみませんか？この投稿を編集して、事実と引用で回答できるように質問を更新してください。 2年前休業。 この質問を改善する React 16.3.0がリリースされ、Context APIは実験的な機能ではなくなりました。ダン・アブラモフ（Reduxのの作成者は）良いコメントを書き込みました。ここではこのことについて、コンテキストが、まだ実験的な機能だった2年でした。 私の質問は、あなたの意見/経験では、React ReduxよりもReact Contextをいつ使用する必要があるか、またはその逆ですか？

187 javascript  reactjs  redux  react-redux  react-context 

2つの子クラスC1とC2をレンダリングするReactクラスPがあるとします。 C1には入力フィールドが含まれています。この入力フィールドをFooと呼びます。 私の目標は、C2がFooの変更に反応できるようにすることです。 私は2つの解決策を考え出しましたが、どちらも正しくないと感じています。 最初の解決策： 割り当てP状態、state.input。 onChangePで関数を作成しますstate.input。これは、イベントを受け取り、を設定します。 これを渡すonChangeようにC1 props、およびC1が結合してみましょうthis.props.onChangeにonChangeはFooの。 これは機能します。Fooの値が変化するたびに、setStatePでa がトリガーされるため、PにはC2に渡す入力があります。 しかし、それは同じ理由でまったく適切とは言えません。私は、子要素から親要素の状態を設定しています。これは、Reactの設計原則、つまり単一方向のデータフローを裏切るようです。 これは私がそうすることになっている方法ですか、それとももっとリアクトナチュラルな解決策がありますか？ 2番目の解決策： FooをPに入れるだけです。 しかし、これは、アプリを構造化するときに従うべき設計原則renderです。つまり、すべてのフォーム要素を最上位クラスのに入れますか？ 私の例のように、C1の大きなレンダリングがある場合render、C1にrenderフォーム要素があるため、C1 全体をP に配置したくありません。 どうすればよいですか？

186 reactjs 

Reactフォームに問題があり、状態を適切に管理しています。（モーダルの）フォームに時間入力フィールドがあります。初期値はで状態変数として設定されgetInitialState、親コンポーネントから渡されます。これ自体は問題なく動作します。 問題は、親コンポーネントを介してデフォルトのstart_time値を更新するときに発生します。更新自体は、を介して親コンポーネントで行われsetState start_time: new_timeます。ただし、私のフォームでは、デフォルトのstart_time値は決して変更されませんgetInitialState。 を使用componentWillUpdateして状態を強制的に変更しようとしましsetState start_time: next_props.start_timeたが、実際には機能しましたが、Uncaught RangeError: Maximum call stack size exceededエラーが発生しました。 だから私の質問は、この場合の状態を更新する正しい方法は何ですか？私はこれがどういうわけか間違っていると思いますか？ 現在のコード： @ModalBody = React.createClass getInitialState: -> start_time: @props.start_time.format("HH:mm") #works but takes long and causes: #"Uncaught RangeError: Maximum call stack size exceeded" componentWillUpdate: (next_props, next_state) -> @setState(start_time: next_props.start_time.format("HH:mm")) fieldChanged: (fieldName, event) -> stateUpdate = {} stateUpdate[fieldName] = …

184 reactjs 

ReactJSの「外部」からコンポーネントメソッドにアクセスできないのはなぜですか？なぜそれが不可能であり、それを解決する方法はありますか？ コードを考えてみましょう： var Parent = React.createClass({ render: function() { var child = <Child />; return ( <div> {child.someMethod()} // expect "bar", got a "not a function" error. </div> ); } }); var Child = React.createClass({ render: function() { return ( <div> foo </div> ); }, someMethod: function() { return 'bar'; …

183 javascript  reactjs  dom 

私はフェッチを使用してWebサービスを呼び出していますが、axiosを使用して同じことができます。だから今私は混乱しています。私はaxiosまたはfetchのどちらに行くべきですか？

182 ajax  reactjs  xmlhttprequest  es6-promise  es6-modules 

ReactでES6クラスを使用するのは初めてですが、以前は現在のオブジェクトにメソッドをバインドしていましたが（最初の例を参照）、ES6を使用すると、クラス関数を矢印でクラスインスタンスに永続的にバインドできますか？（コールバック関数として渡すときに便利です。）CoffeeScriptでできるように使用しようとすると、エラーが発生します。 class SomeClass extends React.Component { // Instead of this constructor(){ this.handleInputChange = this.handleInputChange.bind(this) } // Can I somehow do this? Am i just getting the syntax wrong? handleInputChange (val) => { console.log('selectionMade: ', val); } SomeClass.handleInputChangeたとえばsetTimeout、に渡した場合、スコープはwindowオブジェクトではなくクラスインスタンスにスコープされます。

181 javascript  reactjs  ecmascript-6  babeljs  ecmascript-next 

上にスクロールするたびに一連のメッセージを表示するチャットウィジェットがあります。私が今直面している問題は、メッセージが読み込まれるときにスライダーが上部に固定されたままであることです。前の配列の最後のインデックス要素に焦点を当てたいです。インデックスを渡すことで動的参照を作成できることを理解しましたが、それを達成するために使用するスクロール関数の種類を知る必要もあります handleScrollToElement(event) { const tesNode = ReactDOM.findDOMNode(this.refs.test) if (some_logic){ //scroll to testNode } } render() { return ( <div> <div ref="test"></div> </div>) }

181 javascript  reactjs  ecmascript-6 

現在のルートからなんとか渡されたtitlein を表示したい<AppBar />です。 React Router v4では<AppBar />、現在のルートをどのようにしてtitleプロップに渡すことができますか？ <Router basename='/app'> <main> <Menu active={menu} close={this.closeMenu} /> <Overlay active={menu} onClick={this.closeMenu} /> <AppBar handleMenuIcon={this.handleMenuIcon} title='Test' /> <Route path='/customers' component={Customers} /> </main> </Router> カスタムからカスタムタイトルを渡す方法があるpropには<Route />？

181 reactjs  react-router  react-router-v4 

私はnodejs / reactjsの世界全体に慣れていないので、私の質問がばかげているようでしたら謝罪してください。それで、私はreactabular.jsをいじっています。 私が行うときはいつでも、npm startそれは常に実行されlocalhost:8080ます。 0.0.0.0:8080公開してアクセスできるようにするには、どのように変更して実行するのですか？上記のリポジトリでソースコードを読み取ろうとしましたが、この設定を行うファイルが見つかりませんでした。 また、それに追加するには-それが80可能な場合、どのようにポートで実行するのですか？

180 node.js  reactjs  npm  webpack  webpack-dev-server 

私はかなり好きです はReactのインラインCSSパターンがそれを使用することにしました。 ただし、 :hoverおよび同様のセレクター。では、インラインCSSスタイルを使用しているときに、ハイライトオンホバーを実装する最良の方法は何でしょうか。 #reactjsからの提案の1つは、Clickableコンポーネントを用意し、次のように使用することです。 <Clickable> <Link /> </Clickable> Clickable持っているhovered状態をとリンクする小道具として渡します。しかし、Clickable（私はそれを実装する方法は）ラップLinkでdivそれが設定できるようにonMouseEnterし、onMouseLeaveそれに。これは、物事を少し複雑にします（例えばspan、div動作はとは異なりますspan）。 より簡単な方法はありますか？

178 reactjs 

React 16.8.6（以前のバージョン16.8.3では良かった）では、フェッチ要求で無限ループを回避しようとすると、このエラーが発生します ./src/components/BusinessesList.js Line 51: React Hook useEffect has a missing dependency: 'fetchBusinesses'. Either include it or remove the dependency array react-hooks/exhaustive-deps 私は無限ループを止める解決策を見つけることができませんでした。の使用を避けたいuseReducer()。私はこの議論を見つけましたhttps://github.com/facebook/react/issues/14920可能な解決策はYou can always // eslint-disable-next-line react-hooks/exhaustive-deps if you think you know what you're doing.私がやっていることに自信がないので、まだ実装しようとはしていません。 私はこの現在のセットアップを持っていますReactフックuseEffectは継続的に永久に/無限ループを実行し、唯一のコメントはuseCallback()私がよく知らないものについてです。 私が現在どのように使用しているかuseEffect()（これはと同様に最初に一度だけ実行したいcomponentDidMount()） useEffect(() => { fetchBusinesses(); }, []); const fetchBusinesses = () => { …

178 reactjs  eslint  create-react-app  react-hooks 

私は、サービス/ファクトリーにロジックを抽出し、コントローラーでそれらを使用できる、角度のある世界から来ています。 Reactアプリケーションで同じことをどのように達成できるかを理解しようとしています。 ユーザーのパスワード入力を検証するコンポーネントがあるとします（それは強みです）。それはロジックがかなり複雑であるため、それ自体をコンポーネントに記述したくありません。 このロジックはどこに記述すればよいですか？フラックスを使用している場合、店で？または、より良いオプションはありますか？

177 reactjs  reactjs-flux 

私が使用しています反応するアプリを作成し、したくありませんeject。 @ font-faceを介してインポートされ、ローカルにロードされたフォントをどこに置くべきか明確ではありません。 つまり、ロードしています @font-face { font-family: 'Myriad Pro Regular'; font-style: normal; font-weight: normal; src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff'); } 助言がありますか？ -編集 ダンが回答に言及した要点を含める ➜ Client git:(feature/trivia-game-ui-2) ✗ ls -l public/static/fonts total 1168 -rwxr-xr-x@ 1 maximveksler staff 62676 Mar 17 2014 MYRIADPRO-BOLD.woff -rwxr-xr-x@ 1 maximveksler staff 61500 Mar 17 2014 …

177 css  reactjs  fonts  webpack  create-react-app 

ReactJSでコンポーネントの状態を切り替えようとしていますが、次のエラーが表示されます。 最大更新深度を超えました。これは、コンポーネントがcomponentWillUpdateまたはcomponentDidUpdate内で繰り返しsetStateを呼び出すときに発生する可能性があります。Reactはネストされた更新の数を制限して、無限ループを防止します。 私のコードに無限ループが見えません、誰か助けてもらえますか？ ReactJSコンポーネントコード： import React, { Component } from 'react'; import styled from 'styled-components'; class Item extends React.Component { constructor(props) { super(props); this.toggle= this.toggle.bind(this); this.state = { details: false } } toggle(){ const currentState = this.state.details; this.setState({ details: !currentState }); } render() { return ( <tr className="Item"> <td>{this.props.config.server}</td> <td>{this.props.config.verbose}</td> …

177 javascript  reactjs  react-native