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

Reduxドキュメントの最初の原則は次のとおりです。 アプリケーション全体の状態は、単一のストア内のオブジェクトツリーに保存されます。 そして、私は実際に私がすべての校長をよく理解していると思いました。しかし、私は今、アプリケーションが何を意味するのか混乱しています。 アプリケーションがウェブサイトの少し複雑な部分の1つにすぎず、1ページで機能する場合、私は理解しています。しかし、アプリケーションがWebサイト全体を意味する場合はどうでしょうか。状態ツリーを維持するためにLocalStorageやCookieなどを使用する必要がありますか？しかし、ブラウザがLocalStorageをサポートしていない場合はどうなりますか？ 開発者がどのように状態ツリーを保持しているか知りたいです！:)

92 reactjs  redux  flux 

私はすべて同じことをする必要がある複数のコンポーネントを持っています。（子コンポーネントにマップし、それぞれに何かを行う単純な関数）。現時点では、各コンポーネントでこのメソッドを定義しています。しかし、私はそれを一度だけ定義したいと思います。 トップレベルのコンポーネントで定義して、小道具として渡すことができます。しかし、それは完全に正しく感じられません。これは、小道具というよりもライブラリ関数です。（私にはそう思われる）。 これを行う正しい方法は何ですか？

92 reactjs 

（React.Component）でFacebookのドキュメントを確認しcomponentWillMountましたが、クライアント/サーバーで呼び出される方法とクライアントでcomponentDidMountのみ呼び出される方法が記載されています。componentWillMountサーバーには何をしますか？

91 reactjs 

Sublime Textをテキストエディターとして使用しています。 JavaScriptファイルをフォーマットするためのjsFormatがありますが、JSX用のjsFormatが見つかりません。 どうやってJSXをフォーマットするのですか？

91 reactjs  sublimetext  react-jsx 

bindActionCreatorsのReduxドキュメントには、次のように記載されています。 の唯一の使用例bindActionCreatorsは、一部のアクションクリエーターをReduxを認識しないコンポーネントに渡し、ディスパッチまたはReduxストアを渡さない場合です。 bindActionCreators使用/必要になる例は何ですか？ どのようなコンポーネントがReduxを認識しませんか？ 両方のオプションの長所/短所は何ですか？ //actionCreator import * as actionCreators from './actionCreators' function mapStateToProps(state) { return { posts: state.posts, comments: state.comments } } function mapDispatchToProps(dispatch) { return bindActionCreators(actionCreators, dispatch) } 対 function mapStateToProps(state) { return { posts: state.posts, comments: state.comments } } function mapDispatchToProps(dispatch) { return { someCallback: (postId, index) …

91 reactjs  redux  react-redux 

で、このドキュメントリアクトの、次のことが言われています shallowCompareは、現在のpropsオブジェクトとnextPropsオブジェクト、および現在の状態オブジェクトとnextStateオブジェクトの浅い等価チェックを実行します。 私が理解できないことは、オブジェクトを浅く比較すると、shouldComponentUpdateメソッドは常にtrueを返すことです。 国家を変異させてはならない。 状態を変更しない場合、比較は常にfalseを返すため、shouldComponentの更新は常にtrueを返します。私はそれがどのように機能しているか、そしてこれをどのようにオーバーライドしてパフォーマンスを向上させるかについて混乱しています。

91 javascript  reactjs 

ReactのdivでkeyDownイベントを使用したいのですが。私がやります： componentWillMount() { document.addEventListener("keydown", this.onKeyPressed.bind(this)); } componentWillUnmount() { document.removeEventListener("keydown", this.onKeyPressed.bind(this)); } onKeyPressed(e) { console.log(e.keyCode); } render() { let player = this.props.boards.dungeons[this.props.boards.currentBoard].player; return ( <div className="player" style={{ position: "absolute" }} onKeyDown={this.onKeyPressed} // not working > <div className="light-circle"> <div className="image-wrapper"> <img src={IMG_URL+player.img} /> </div> </div> </div> ) } うまく動きますが、Reactスタイルでもっとやりたいです。私は試した onKeyDown={this.onKeyPressed} コンポーネント上。しかし、それは反応しません。私が思い出すように、それは入力要素で動作します。 Codepen …

91 reactjs  events  keypress  keydown 

で実際のアプリしか見ることができません/public。 の構成webpack.config.jsは次のとおりです。 var path = require('path'); var webpack = require('webpack'); module.exports = { entry: [ 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server', './app/js/App.js' ], output: { path: path.join(__dirname, 'public'), filename: 'bundle.js', publicPath: 'http://localhost:8080' }, module: { loaders: [ { test: /\.js$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/ } ] }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() …

91 node.js  reactjs  webpack  reactjs-flux  webpack-dev-server 

Typescript、React、Redux（すべてElectronで実行）を使用するプロジェクトに取り組んでいますが、あるクラスベースのコンポーネントを別のコンポーネントに含めて、それらの間でパラメーターを渡そうとすると、問題が発生します。大まかに言えば、コンテナコンポーネントには次の構造があります。 class ContainerComponent extends React.Component<any,any> { .. render() { const { propToPass } = this.props; ... <ChildComponent propToPass={propToPass} /> ... } } .... export default connect(mapStateToProps, mapDispatchToProps)(ContainerComponent); そして子コンポーネント： interface IChildComponentProps extends React.Props<any> { propToPass: any } class ChildComponent extends React.Component<IChildComponentProps, any> { ... } .... export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent); 明らかに、私は基本的なものだけを含めており、これらのクラスにはさらに多くのものがありますが、有効なコードのように見えるものを実行しようとすると、まだエラーが発生します。私が得ている正確なエラー： …

91 reactjs  typescript  redux  electron  jsx 

を<input>使用するときに値にアクセスする方法について混乱していますmount。これが私のテストとして得たものです： it('cancels changes when user presses esc', done => { const wrapper = mount(<EditableText defaultValue="Hello" />); const input = wrapper.find('input'); console.log(input.render().attr('value')); input.simulate('focus'); done(); }); コンソールが印刷されundefinedます。しかし、コードを少し変更すると、機能します。 it('cancels changes when user presses esc', done => { const wrapper = render(<EditableText defaultValue="Hello" />); const input = wrapper.find('input'); console.log(input.val()); input.simulate('focus'); done(); }); もちろん、input.simulate私がrender今使っているので、回線が失敗することを除いて。正しく動作するには両方が必要です。これを修正するにはどうすればよいですか？ 編集： …

91 unit-testing  reactjs  enzyme 

テキスト入力は中央揃えです。左上隅から入力を受け取るようにこのテキスト入力を修正する方法 これがテキスト入力用の私のCSSです /* The Text input is center aligned, how to fix this text input so that it takes input from top left corner */ input: { flex: 1, padding: 4, marginRight: 1, marginTop: 5, fontSize: 18, borderWidth: 1, borderRadius: 4, borderColor: '#E6E5ED', backgroundColor: '#F8F8F9', justifyContent: 'flex-start', height: 150 }

91 javascript  ios  reactjs  react-native 

のユニットテストがありますreducers。ただし、ブラウザーでデバッグしているときに、アクションが正しく呼び出されているかどうか、およびそれに応じて状態が変更されているかどうかを確認したいと思います。 私は次のようなものを探しています： window._redux.store ...ブラウザで入力して、コンソールで入力し、状況を確認できます。 どうすればそれを達成できますか？

91 javascript  reactjs  redux 

取得index.jsしてビルドしたいカルーセルファイルがあるblock.build.jsので、次のようになりwebpack.config.jsます。 var config = { entry: './index.js', output: { path: __dirname, filename: 'block.build.js', }, devServer: { contentBase: './Carousel' }, module : { rules : [ { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['react', 'es2015'], plugins: ['transform-class-properties'] } } ] } }; module.exports = config; package.jsonこれは私の使用は以下の通りです： { "name": …

91 reactjs  webpack  babeljs 

閲覧履歴に応じて、いくつかのビジネスロジックを実装する必要があります。 私がやりたいのは次のようなものです。 reactRouter.onUrlChange(url => { this.history.push(url); }); URLが更新されたときにreact-routerからコールバックを受信する方法はありますか？

91 reactjs  react-router  react-router-v4  react-router-redux  react-router-dom 

React-Router（v4）を試していますが、Navから始めてLink'のいずれかを使用する際に問題が発生しますactive。Linkタグのいずれかをクリックすると、アクティブなものが機能し始めます。ただし、ルートLinkで読み込まれるコンポーネントであるため、アプリが起動したらすぐにHomeをアクティブにしたいです/。これを行う方法はありますか？ これが私の現在のコードです： const Router = () => ( <BrowserRouter> <div> <Nav> <Link activeClassName='is-active' to='/'>Home</Link> {/* I want this to start off as active */} <Link activeClassName='is-active' to='/about'>About</Link> </Nav> <Match pattern='/' exactly component={Home} /> <Match pattern='/about' exactly component={About} /> <Miss component={NoMatch} /> </div> </BrowserRouter> )

91 javascript  reactjs  ecmascript-6  react-router