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

私はReactJSを研究し始めたばかりで、ページをレンダリングする2つの方法（サーバー側とクライアント側）を提供することがわかりました。しかし、一緒に使う方法がわかりません。アプリケーションを構築する方法は2つありますか、それとも一緒に使用できますか？ それを一緒に使用できる場合、その方法-サーバー側とクライアント側で同じ要素を複製する必要がありますか？または、サーバーでアプリケーションの静的な部分を構築し、クライアント側で動的な部分を構築できます。事前にレンダリングされたサーバー側への接続はありませんか？

120 javascript  node.js  client-server  reactjs 

私が持っています var TestApp = React.createClass({ getComponent: function(){ console.log(this.props); }, render: function(){ return( <div> <ul> <li onClick={this.getComponent}>Component 1</li> </ul> </div> ); } }); React.renderComponent(<TestApp />, document.body); クリックしたリスト要素の背景に色を付けたいのですが。Reactでこれを行うにはどうすればよいですか？ 何かのようなもの $('li').on('click', function(){ $(this).css({'background-color': '#ccc'}); });

120 javascript  jquery  reactjs 

反応ネイティブアプリを起動しようとすると、このメッセージが表示されます。通常、この種類のフォーマットは他のマルチスクリーンナビゲーションで機能しますが、この場合はどういうわけか機能しません。 ここにエラーがあります： Invariant Violation: The navigation prop is missing for this navigator. In react-navigation 3 you must set up your app container directly. More info: https://reactnavigation.org/docs/en/app-containers.html これが私のアプリフォーマットです： import React, {Component} from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { createStackNavigator } from 'react-navigation'; import Login from './view/login.js' …

120 reactjs  react-native 

contentEditableベースのコントロールの変更イベントをリッスンするにはどうすればよいですか？ var Number = React.createClass({ render: function() { return <div> <span contentEditable={true} onChange={this.onChange}> {this.state.value} </span> = {this.state.value} </div>; }, onChange: function(v) { // Doesn't fire :( console.log('changed', v); }, getInitialState: function() { return {value: '123'} } }); React.renderComponent(<Number />, document.body); http://jsfiddle.net/NV/kb3gN/1621/

120 javascript  dom  contenteditable  reactjs 

初めてReactフックを試しましたが、データを取得して2つの異なる状態変数（データと読み込みフラグ）を更新すると、両方の呼び出しがあったとしても、コンポーネント（データテーブル）が2回レンダリングされることに気付くまではすべて問題ないようでした状態アップデータへの変換は同じ機能で発生しています。これが私のコンポーネントに両方の変数を返す私のapi関数です。 const getData = url => { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); useEffect(async () => { const test = await api.get('/people') if(test.ok){ setLoading(false); setData(test.data.results); } }, []); return { data, loading }; }; 通常のクラスコンポーネントでは、複雑なオブジェクトになる可能性のある状態を更新するために1回の呼び出しを行いますが、「フック方法」は状態をより小さな単位に分割することであるように思われ、その副作用は複数回繰り返されるようです。個別に更新されるとレンダリングされます。これを軽減する方法はありますか？

120 javascript  reactjs  react-hooks 

複数の言語とロケールで利用できるようにする必要があるアプリを作成しています。 私の質問は、純粋に技術的なものではなく、アーキテクチャと、人々がこの問題を解決するために実際に本番で使用しているパターンについてです。そのための「クックブック」はどこにも見つからなかったので、お気に入りのQ / A Webサイトに移動します:) ここに私の要件があります（それらは本当に「標準」です）： ユーザーは言語を選択できます（簡単です） 言語を変更すると、インターフェースは自動的に新しく選択された言語に翻訳されます 現時点では、数値や日付などのフォーマットについてあまり心配していません。文字列を翻訳するだけの簡単な解決策が欲しいのですが ここに私が考えることができる可能な解決策があります： 各コンポーネントは個別に翻訳を処理します つまり、各コンポーネントには、翻訳された文字列と一緒に、たとえばen.json、fr.jsonなどの一連のファイルがあります。また、選択した言語に応じて値を読み取るのに役立つヘルパー関数。 プロ：Reactの哲学を尊重し、各コンポーネントは「スタンドアロン」です 短所：すべての翻訳をファイルに一元化することはできません（たとえば、誰かに新しい言語を追加させるため） 短所：すべての流血のコンポーネントとその子供に、現在の言語を小道具として渡す必要があります 各コンポーネントは、小道具を介して翻訳を受け取ります したがって、彼らは現在の言語を認識していません。たまたま現在の言語と一致する小道具として文字列のリストを取得します プロ：これらの文字列は「上から」来るため、どこかに集中させることができます 短所：各コンポーネントが翻訳システムに関連付けられているため、コンポーネントを再利用するだけではなく、毎回正しい文字列を指定する必要があります。 小道具を少しバイパスし、おそらくコンテキストの事を使用して現在の言語を伝えます プロ：それはほとんど透過的で、現在の言語や翻訳をプロップを介して常に渡す必要はありません 短所：使用するのが面倒に見える 他にアイデアがあれば、言ってください！ どうやってやるの？

119 architecture  internationalization  reactjs  translation  redux 

次のようなレンダリングを備えたコンポーネントがあるとします。 <View style={jewelStyle}></View> ここでjewelStyle = { borderRadius: 10, backgroundColor: '#FFEFCC', width: 20, height: 20, }, 背景色を動的にしてランダムに割り当てるにはどうすればよいですか？私はもう試した { borderRadius: 10, backgroundColor: getRandomColor(), width: 20, height: 20, }, ただし、これにより、Viewのすべてのインスタンスが同じ色になります。それぞれを一意にする必要があります。 任意のヒント？

119 css  reactjs  react-native 

の意味は何ですか {...this.props} 私はそのようにそれを使用しようとしています <div {...this.props}> Content Here </div>

119 reactjs 

私はプログラミングに不慣れであるため、公式のドキュメントを読んだ場合、理解するのが少し難しくなります。 ここからReactRouter4について読んでいました この記事では、著者が話していた<HashRouter>と<BrowserRouter> これは彼が言ったことです HashRouterは基本的に、URLのハッシュを使用してコンポーネントをレンダリングします。静的な1ページのWebサイトを構築していたので、これを使用する必要がありました。 BrowserRouterは、HTML5履歴APIを使用してコンポーネントをレンダリングします。履歴は、pushStateおよびreplaceStateを介して変更できます。詳細については、こちらをご覧ください 今、私は両方の重要性とユースケースを取得していません。彼が、pushStateとreplaceStateを介して履歴を変更でき、URLのハッシュを使用してコンポーネントをレンダリングすると言ったときの意味のように BrowserRouterの最初の説明は私には完全に曖昧ですが、HashRouterの2番目の説明も意味がありません。たとえば、誰かがURLでハッシュ（＃）を使用してコンポーネントをレンダリングするのはなぜですか。

119 reactjs 

に出くわしたとき、私はフックのドキュメントを調べていましたuseRef。 彼らの例を見て… function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { // `current` points to the mounted text input element inputEl.current.focus(); }; return ( <> <input ref={inputEl} type="text" /> <button onClick={onButtonClick}>Focus the input</button> </> ); } …にuseRef置き換えることができるようcreateRefです。 function TextInputWithFocusButton() { const inputRef = createRef(); // what's …

119 javascript  reactjs  react-hooks 

Material-UIで少し遊んでいます。（Bootstrapのように）グリッドレイアウトを作成するためのオプションはありますか？ そうでない場合、この機能を追加する方法は何ですか？ GridListコンポーネントがありますが、それはいくつかの異なる目的を持っていると思います。

118 reactjs  material-design  material-ui  grid-system 

次のように、HTMLタグを使用してテキストを渡すことができるようにしたいと思います。 <MyComponent text="This is <strong>not</strong> working." /> しかし、MyComponentのrenderメソッドの内部ではthis.props.text、出力すると文字通りすべてが出力されます。 This is <strong>not</strong> working. ReactがHTMLを解析して適切にダンプする方法はありますか？

118 reactjs 

私はまだReactの初心者であり、インターネット上の多くの例では、子要素のレンダリングにこのバリエーションがあり、混乱しています。通常私はこれを見ます： class Users extends React.Component { render() { return ( <div> <h2>Users</h2> {this.props.children} </div> ) } } しかし、それから私はこのような例を見ます： <ReactCSSTransitionGroup component="div" transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={500} > {React.cloneElement(this.props.children, { key: this.props.location.pathname })} </ReactCSSTransitionGroup> 今私はAPIを理解していますが、ドキュメントは私がそれをいつ使用すべきかを明確に示していません。 では、他の人ができないことは、何をするのでしょうか？誰かがこれをより良い例で私に説明できますか？

118 reactjs 

TypeScriptを使用してReactプロジェクトの作業を開始し、通常のクラスファイルをどうすればよいか自問しています。.tsまたは.tsxファイルを使用する必要がありますが.tsx、Reactプロジェクトではない場合でも、ファイルを常に使用しない理由を見つけることができませんでした。 .tsxファイルを使用してはならない理由または特定の状況はありますか？いいえの場合、なぜTypeScriptチームはまったく新しい拡張機能を追加するのですか？

118 javascript  reactjs  typescript 

Reactの世界の初心者なので、使用する{this.props.children}とどうなるか、また使用する状況はどうなるのかを深く理解したいと思います。以下のコードスニペットでそれの関連性は何ですか？ render() { if (this.props.appLoaded) { return ( <div> <Header appName={this.props.appName} currentUser={this.props.currentUser} /> {this.props.children} </div> ); } }

118 javascript  reactjs  react-redux  frontend