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

Reactを使用して、DOM全体に複数回コンポーネントを追加したいと思います。このフィドルは私が何をしようとしているのかを示しており、エラーをスローしません。これがコードです： HTML： <div id="container"> <!-- This element's contents will be replaced with the first component. --> </div> <div id="second-container"> <!-- This element's contents will be replaced with the second component. --> </div> JS： var Hello = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); React.render(<Hello name="World" />, document.getElementById('container')); React.render(<Hello …

107 reactjs 

接続する単純なReactコンポーネントがあります（単純な配列/状態をマッピングします）。ストアのコンテキストを参照しないようにするために、小道具から直接「ディスパッチ」を取得する方法が欲しいのですが。他の人がこのアプローチを使用しているのを見ましたが、何らかの理由でこれにアクセスできません:) これは私が現在使用している各npm依存関係のバージョンです "react": "0.14.3", "react-redux": "^4.0.0", "react-router": "1.0.1", "redux": "^3.0.4", "redux-thunk": "^1.0.2" これは、接続メソッドを持つコンポーネントです class Users extends React.Component { render() { const { people } = this.props; return ( <div> <div>{this.props.children}</div> <button onClick={() => { this.props.dispatch({type: ActionTypes.ADD_USER, id: 4}); }}>Add User</button> </div> ); } }; function mapStateToProps(state) { return { people: …

107 javascript  reactjs  redux 

このようにwebpack.config.jsを書くと module.exports = { entry: './index.jsx', output: { filename: 'bundle.js' }, module: { loaders: [{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } }] } }; そしてindex.jsx私はreactモジュールをインポートしますApp import React from 'react'; import { render } from 'react-dom'; import App from './containers/App'; let rootElement = document.getElementById('box') render( …

107 reactjs  webpack  webpack-dev-server 

私がしまし時々見て、人々は自分でコンポーネントをラップwithRouterそれらを輸出しているとき： import { withRouter } from 'react-router-dom'; class Foo extends React.Component { // ... } export default withRouter(Foo); これは何のために、いつ使うべきですか？

107 reactjs  react-router 

Reactアプリケーションの（ブラウザーのタイトルバーにある）ドキュメントのタイトルを設定したいと思います。私が使って試してみまし反応し、ドキュメントのタイトルを（古くらしい）との設定document.titleにconstructorしてcomponentDidMount()-これらのソリューションの作品のどれも。

107 javascript  reactjs  dom 

componentDidMountフックを介してReact機能コンポーネントでシミュレートする方法はありますか？

107 javascript  reactjs  react-hooks 

i18n翻訳オブジェクトをコンポーネント（アプリに読み込まれる最初のコンポーネント）で1回初期化しました。他のすべてのコンポーネントでは、同じオブジェクトが必要です。すべてのコンポーネントで再初期化したくありません。どうすればいいの？render()メソッドで使用する必要があるため、ウィンドウスコープで使用できるようにしても効果がありません。 i18n固有のソリューションではなく、これらの問題の一般的なソリューションを提案してください。

106 reactjs  javascript-globalize 

ドキュメントによると： componentDidUpdate()更新が発生した直後に呼び出されます。このメソッドは、最初のレンダリングでは呼び出されません。 新しいuseEffect()フックを使用してシミュレートできますが、最初でも、すべてのレンダリングの後に実行されcomponentDidUpdate()ているようuseEffect()です。最初のレンダリングで実行されないようにするにはどうすればよいですか？ 以下の例でわかるように、componentDidUpdateFunctionは最初のレンダリング中に印刷されますが、最初のレンダリング中には印刷されcomponentDidUpdateClassませんでした。 function ComponentDidUpdateFunction() { const [count, setCount] = React.useState(0); React.useEffect(() => { console.log("componentDidUpdateFunction"); }); return ( <div> <p>componentDidUpdateFunction: {count} times</p> <button onClick={() => { setCount(count + 1); }} > Click Me </button> </div> ); } class ComponentDidUpdateClass extends React.Component { constructor(props) { super(props); this.state = { count: …

106 javascript  reactjs  react-hooks 

状態の再レンダリングによってUIの問題が発生する問題があり、ページの再レンダリングの量を減らすために、レデューサー内の特定の値のみを更新するように提案されました。 これは私の状態の例です { name: "some name", subtitle: "some subtitle", contents: [ {title: "some title", text: "some text"}, {title: "some other title", text: "some other text"} ] } 私は現在このように更新しています case 'SOME_ACTION': return { ...state, contents: action.payload } どこaction.payloadに新しい値を含む全体の配列です。しかし今、私は実際にはcontents配列の2番目のアイテムのテキストを更新する必要があるだけで、このようなものは機能しません case 'SOME_ACTION': return { ...state, contents[1].text: action.payload } action.payload更新に必要なテキストはどこにありますか。

105 javascript  reactjs  redux 

クライアント用に1つ、AppToolbar用に1つ、他にいくつかの減速機があります... ここで、クライアントを削除するフェッチアクションを作成したとしましょう。失敗した場合、Clientsレデューサーに何らかの処理を行うコードがありますが、AppToolbarにグローバルエラーを表示したいとします。 しかし、クライアントとAppToolbarレデューサーは状態の同じ部分を共有せず、レデューサーで新しいアクションを作成できません。 それでは、グローバルエラーを表示するにはどうすればよいですか？ありがとう 更新1： 私はeste devstack を使用していることを忘れています 更新2： 私はエリックの答えを正しいとマークしましたが、私がエステで使用している解決策は、エリックとダンの答えを組み合わせたものに似ていると言う必要があります...コードに最適なものを見つける必要があります。 。

105 javascript  reactjs  redux 

投稿のリストをレンダリングしています。各投稿について、href文字列の一部として投稿IDを含むアンカータグをレンダリングしたいと思います。 render: function(){ return ( <ul> { this.props.posts.map(function(post){ return <li key={post.id}><a href='/posts/'{post.id}>{post.title}</a></li> }) } </ul> ); どのように私はそれが各ポストはのhrefの持っているように行うのですか/posts/1、/posts/2などを？

105 javascript  reactjs 

これが私の状況です： this.handleFormSubmit（）でthis.setState（）を実行しています this.handleFormSubmit（）内で、this.findRoutes（）;を呼び出しています。-this.setState（）の正常な完了に依存します this.setState（）; this.findRoutesが呼び出される前に完了しません... this.findRoutes（）を呼び出す前に、this.handleFormSubmit（）内のthis.setState（）が完了するのを待つにはどうすればよいですか？ 準ソリューション： this.findRoutes（）をcomponentDidUpdate（）に配置する findRoutes（）関数とは関係のない状態の変化が多くなるため、これは受け入れられません。無関係な状態が更新されたときにfindRoutes（）関数をトリガーしたくありません。 以下のコードスニペットをご覧ください。 handleFormSubmit: function(input){ // Form Input this.setState({ originId: input.originId, destinationId: input.destinationId, radius: input.radius, search: input.search }) this.findRoutes(); }, handleMapRender: function(map){ // Intialized Google Map directionsDisplay = new google.maps.DirectionsRenderer(); directionsService = new google.maps.DirectionsService(); this.setState({map: map}); placesService = new google.maps.places.PlacesService(map); directionsDisplay.setMap(map); }, findRoutes: …

105 javascript  reactjs  state 

npm run ejectコマンドは何をしますか？start、build、testなど、他のコマンドの機能を理解しています。しかし、イジェクトについてはわかりません。

105 reactjs  webpack  create-react-app  react-scripts 

/#/react-routerを使用しているときにブラウザーのアドレスバーに表示されないようにする方法はありますか？それはReactJSについてです。つまり、リンクをクリックして新しいルートに移動すると、localhost:3000/#/またはが表示され localhost:3000/#/aboutます。ルートによります。

103 reactjs  react-router 

Reactアプリでlintを実行していますが、次のエラーが表示されます。 error JSX props should not use arrow functions react/jsx-no-bind そして、これは私が矢印関数を実行しているところです（内部onClick）： {this.state.photos.map(tile => ( <span key={tile.img}> <Checkbox defaultChecked={tile.checked} onCheck={() => this.selectPicture(tile)} style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}} /> <GridTile title={tile.title} subtitle={<span>by <b>{tile.author}</b></span>} actionIcon={<IconButton onClick={() => this.handleDelete(tile)}><Delete color="white"/></IconButton>} > <img onClick={() => this.handleOpen(tile.img)} src={tile.img} style={{cursor: 'pointer'}}/> …

103 javascript  reactjs  ecmascript-6  jsx  arrow-functions