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

私はReactをいじくり回してきましたが、これまでのところとても気に入っています。NodeJSでアプリを構築していますが、アプリケーション全体のインタラクティブコンポーネントの一部にReactを使用したいと考えています。シングルページアプリにしたくありません。 以下の質問に答えるウェブをまだ見つけていません。 Reactコンポーネントを複数ページのアプリに分割またはバンドルするにはどうすればよいですか？ アプリの一部のセクションでコンポーネントをロードできない場合でも、現在すべてのコンポーネントが1つのファイルに含まれています。 これまでのところ、ReactがレンダリングするコンテナーのIDを検索することにより、条件ステートメントを使用してコンポーネントをレンダリングしようとしています。Reactのベストプラクティスが何であるかは100％わかりません。こんな感じです。 if(document.getElementById('a-compenent-in-page-1')) { React.render( <AnimalBox url="/api/birds" />, document.getElementById('a-compenent-in-page-1') ); } if(document.getElementById('a-compenent-in-page-2')) { React.render( <AnimalBox url="/api/cats" />, document.getElementById('a-compenent-in-page-2') ); } if(document.getElementById('a-compenent-in-page-3')) { React.render( <AnimalSearchBox url="/api/search/:term" />, document.getElementById('a-compenent-in-page-3') ); } まだドキュメントを読んでいて、マルチページアプリに必要なものがまだ見つかりません。 前もって感謝します。

122 javascript  node.js  reactjs 

私は認証されたルートを実装しようとしていましたが、React Router 4はこれが機能しないようになりました： <Route exact path="/" component={Index} /> <Route path="/auth" component={UnauthenticatedWrapper}> <Route path="/auth/login" component={LoginBotBot} /> </Route> <Route path="/domains" component={AuthenticatedWrapper}> <Route exact path="/domains" component={DomainsIndex} /> </Route> エラーは： 警告：を同じルートで使用<Route component>しないでください<Route children>。<Route children>無視されます その場合、これを実装する正しい方法は何ですか？ react-router（v4）ドキュメントに表示されます。 <Router> <div> <AuthButton/> <ul> <li><Link to="/public">Public Page</Link></li> <li><Link to="/protected">Protected Page</Link></li> </ul> <Route path="/public" component={Public}/> <Route path="/login" component={Login}/> <PrivateRoute …

122 javascript  reactjs  react-router  react-router-v4 

データを状態配列にプッシュする際に問題が発生しているようです。私はそれをこの方法で達成しようとしています： this.setState({ myArray: this.state.myArray.push('new value') }) しかし、これは間違った方法であり、可変性の問題を引き起こすと思いますか？

122 javascript  reactjs  immutability 

小さな反応アプリを作成していますが、ローカル画像が読み込まれません。placehold.it/200x200ロードのような画像。サーバーの問題かもしれませんか？ これが私のApp.jsです import React, { Component } from 'react'; class App extends Component { render() { return ( <div className="home-container"> <div className="home-content"> <div className="home-text"> <h1>foo</h1> </div> <div className="home-arrow"> <p className="arrow-text"> Vzdělání </p> <img src={"/images/resto.png"} /> </div> </div> </div> ); } } export default App; index.js： import React, { Component } …

122 javascript  reactjs 

他の状態に依存している状態があるとしましょう（たとえば、Aが変更されたときにBを変更したい）。 Aを監視し、useEffectフック内にBを設定するフックを作成することは適切ですか？ ボタンをクリックすると、最初のエフェクトが起動してbが変化し、次のレンダリングの前に2番目のエフェクトが起動するように、エフェクトはカスケードされますか？このようなコードを構造化することのパフォーマンス上の欠点はありますか？ let MyComponent = props => { let [a, setA] = useState(1) let [b, setB] = useState(2) useEffect( () => { if (/*some stuff is true*/) { setB(3) } }, [a], ) useEffect( () => { // do some stuff }, [b], ) return ( <button onClick={() => …

122 javascript  reactjs  react-hooks 

これは、回答可能と独断の境界線をたどっているかもしれませんが、複雑さが増し、何らかの方向性を使用する可能性がある場合に、ReactJSコンポーネントをどのように構成するかについて、前後に説明します。 AngularJSから来て、モデルをプロパティとしてコンポーネントに渡し、コンポーネントにモデルを直接変更させたいと思います。または、モデルをさまざまなstateプロパティに分割し、上流に送り返すときに一緒にコンパイルする必要がありますか？ReactJSの方法は何ですか？ ブログ投稿エディターの例を見てみましょう。モデルを直接変更しようとすると、次のようになります。 var PostEditor = React.createClass({ updateText: function(e) { var text = e.target.value; this.props.post.text = text; this.forceUpdate(); }, render: function() { return ( <input value={this.props.post.text} onChange={this.updateText}/> <button onClick={this.props.post.save}/>Save</button> ); } }); それは間違っているようです。 次のように保存する前に、モデルtextプロパティstateを作成し、モデルにコンパイルするためのReactの方法ですか？ var PostEditor = React.createClass({ getInitialState: function() { return { text: "" }; }, componentWillMount: function() { …

121 reactjs 

react.jsでは、タイムアウト参照をインスタンス変数（this.timeout）または状態変数（this.state.timeout）として格納する方が良いですか？ React.createClass({ handleEnter: function () { // Open a new one after a delay var self = this; this.timeout = setTimeout(function () { self.openWidget(); }, DELAY); }, handleLeave: function () { // Clear the timeout for opening the widget clearTimeout(this.timeout); } ... }) または React.createClass({ handleEnter: function () { // …

121 javascript  reactjs 

特定のルートではなく前のページに戻る方法を教えてもらえますか？ このコードを使用する場合： var BackButton = React.createClass({ mixins: [Router.Navigation], render: function() { return ( <button className="button icon-left" onClick={this.navigateBack}> Back </button> ); }, navigateBack: function(){ this.goBack(); } }); このエラーを取得します。ルーターの履歴がないため、goBack（）は無視されました これが私のルートです： // Routing Components Route = Router.Route; RouteHandler = Router.RouteHandler; DefaultRoute = Router.DefaultRoute; var routes = ( <Route name="app" path="/" handler={OurSchoolsApp}> <DefaultRoute name="home" …

121 javascript  reactjs  react-router 

次のコードは、このライブの例にあります 私は次の反応ネイティブ要素を持っています： 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View style={styles.container}> <View style={styles.descriptionContainerVer}> <View style={styles.descriptionContainerHor}> <Text style={styles.descriptionText} numberOfLines={5} > Here is a really long text that you can do nothing about, its gonna …

121 css  reactjs  react-native  flexbox 

サガ関数内のredux状態にアクセスするにはどうすればよいですか？ 短い答え： import { select } from 'redux-saga/effects'; ... let data = yield select(stateSelectorFunction);

121 javascript  reactjs  redux  react-redux  redux-saga 

2番目のパラメータとしてGETリクエストを送信しようとしていますが、URLとして実行している間は機能しません。 これは機能し、$ _ GET ['naam']はテストを返します。 export function saveScore(naam, score) { return function (dispatch) { axios.get('http://****.nl/****/gebruikerOpslaan.php?naam=test') .then((response) => { dispatch({type: "SAVE_SCORE_SUCCESS", payload: response.data}) }) .catch((err) => { dispatch({type: "SAVE_SCORE_FAILURE", payload: err}) }) } }; しかし、これを試してみると、何もありません$_GET。 export function saveScore(naam, score) { return function (dispatch) { axios.get('http://****.nl/****/gebruikerOpslaan.php', { password: 'pass', naam: naam, score: …

121 reactjs  react-native  redux  axios 

私は以下を持っています： 青い下線を取り除くにはどうすればよいですか？コードは以下のとおりです。 <Link to="first"><MenuItem style={{paddingLeft: 13, textDecoration: 'none'}}> Team 1 </MenuItem></Link> MenuItemコンポーネントはhttp://www.material-ui.com/#/components/menuにあります 洞察やガイダンスをいただければ幸いです。前もって感謝します。

121 javascript  reactjs  react-router 

React.PropTypesTypeScript Reactアプリケーションでの使用は意味がありますか、それとも「ベルトとサスペンダー」の単なる例ですか？ コンポーネントクラスはProps型パラメーターで宣言されているので、 interface Props { // ... } export class MyComponent extends React.Component<Props, any> { ... } 追加することには本当にメリットがありますか static propTypes { myProp: React.PropTypes.string } クラス定義に？

121 reactjs  typescript  react-proptypes 

Reactが要素をレンダリングした後、要素の高さを取得するにはどうすればよいですか？ HTML <div id="container"> <!-- This element's contents will be replaced with your component. --> <p> jnknwqkjnkj<br> jhiwhiw (this is 36px height) </p> </div> ReactJS var DivSize = React.createClass({ render: function() { let elHeight = document.getElementById('container').clientHeight return <div className="test">Size: <b>{elHeight}px</b> but it should be 18px after the render</div>; } }); …

121 javascript  reactjs 

ReactJSの使用を開始 プロップ検証機能。これは、ドキュメントによると、パフォーマンス上の理由から「開発モード」でのみ機能します。 Reactは、注釈を付けた特定のコンポーネントのプロパティを検証しているようですが、「開発モード」を明示的にオンにしたことを覚えていません。 開発モードをトリガー/トグルする方法を探してみましたが、うまくいきませんでした。

120 reactjs