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

私の問題を簡単に尋ねるために、このコードの結果を説明しましょう。 const ForExample = () => { const [name, setName] = useState(''); const [username, setUsername] = useState(''); useEffect(() => { console.log('effect'); console.log({ name, username }); return () => { console.log('cleaned up'); console.log({ name, username }); }; }, [username]); const handleName = e => { const { value } = e.target; …

83 reactjs  react-hooks 

reduxとの非同期を学ぶための簡単なアプリを作っているだけです。すべてが機能するようになりました。今は、実際の状態をWebページに表示したいだけです。では、renderメソッドで実際にストアの状態にアクセスするにはどうすればよいですか？ これが私のコードです（私は学習しているだけなので、すべてが1ページにあります）： const initialState = { fetching: false, fetched: false, items: [], error: null } const reducer = (state=initialState, action) => { switch (action.type) { case "REQUEST_PENDING": { return {...state, fetching: true}; } case "REQUEST_FULFILLED": { return { ...state, fetching: false, fetched: true, items: action.payload } } case "REQUEST_REJECTED": { …

83 javascript  asynchronous  reactjs  redux  react-redux 

スタイル付きコンポーネントでホバーを処理するための最良の方法は何ですか。カーソルを合わせるとボタンが表示されるラッピング要素があります。 コンポーネントにいくつかの状態を実装し、ホバー時にプロパティを切り替えることはできましたが、styled-cmponentsでこれを行うためのより良い方法があるかどうか疑問に思いました。 次のようなものは機能しませんが、理想的です。 const Wrapper = styled.div` border-radius: 0.25rem; overflow: hidden; box-shadow: 0 3px 10px -3px rgba(0, 0, 0, 0.25); &:not(:last-child) { margin-bottom: 2rem; } &:hover { .button { display: none; } } `

83 reactjs  styled-components 

誰かがreact-routerで特定のルートへのアクセスを制限する方法を知っていますか？特定のルートへのアクセスを許可する前に、ユーザーがログインしているかどうかを確認したいと思います。簡単だと思いましたが、ドキュメントではその方法が明確ではありません。 これは、<Route>コンポーネントを定義する場所に設定する必要がありますか、それともコンポーネントハンドラー内で処理する必要がありますか？ <Route handler={App} path="/"> <NotFoundRoute handler={NotFound} name="not-found"/> <DefaultRoute handler={Login} name="login"/> <Route handler={Todos} name="todos"/> {/* I want this to be restricted */} </Route>

83 javascript  reactjs  react-router 

どのように反応させてレンダリングさせるのですか？ <input id={field.name} className="form-control" type="text" placeholder={field.name} autocomplete="off" {...field}/>

83 html  reactjs  google-chrome 

このReactRouter Dom v4の例を見るとhttps://reacttraining.com/react-router/web/example/auth-workflowPrivateRouteコンポーネントがこのような残りの小道具を分解していることがわかります const PrivateRoute = ({ component: Component, ...rest }) => ( <Route {...rest} render={props => ( fakeAuth.isAuthenticated ? ( <Component {...props}/> ) : ( <Redirect to={{ pathname: '/login', state: { from: props.location } }}/> ) )}/> ) 私はそれが{ component: Component, ...rest }意味することを確信したい： からprops、コンポーネントプロップを取得してから、他のすべてのプロップを取得し、名前propsをに変更restして、ルートrender関数に渡されるプロップの名前付けの問題を回避できるようにします。 私は正しいですか？

83 reactjs  react-router 

私はwebpackを使用してreactコンポーネントを構築しており、を使用しextract-text-webpack-pluginてcssを生成されたjsファイルから分離しようとしています。ただし、コンポーネントをビルドしようとすると、次のエラーが発生します Module build failed: ReferenceError: window is not defined。 私のwebpack.config.jsファイルは次のようになります。 var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: { MainComponent: './src/main.js' }, output: { libraryTarget: 'var', library: 'MainComponent', path: './build', filename: '[name].js' }, module: { loaders: [{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader!css-loader') }] }, plugins: [ new …

82 reactjs  webpack 

React NativeNavigatorコンポーネント内に作成されたreact-reduxコンテナコンポーネントがあります。ナビゲーターを小道具としてこのコンテナーコンポーネントに渡して、プレゼンテーションコンポーネント内でボタンを押した後、オブジェクトをナビゲータースタックにプッシュできるようにしたいと思います。 私は、react-reduxコンテナコンポーネントが提供するすべての定型コードを手書きする必要なしにこれを実行したいと思います（また、react-reduxがここでも提供するすべての最適化を見逃さないでください）。 コンテナコンポーネントコードの例： const mapStateToProps = (state) => { return { prop1: state.prop1, prop2: state.prop2 } } const mapDispatchToProps = (dispatch) => { return { onSearchPressed: (e) => { dispatch(submitSearch(navigator)) // This is where I want to use the injected navigator } } } const SearchViewContainer = connect( mapStateToProps, …

82 reactjs  react-native  redux  react-redux 

ajaxリクエストが完了した後にコンポーネントをレンダリングしたいと思います。 以下に私のコードを見ることができます var CategoriesSetup = React.createClass({ render: function(){ var rows = []; $.get('http://foobar.io/api/v1/listings/categories/').done(function (data) { $.each(data, function(index, element){ rows.push(<OptionRow obj={element} />); }); return (<Input type='select'>{rows}</Input>) }) } }); しかし、ajaxリクエストのdoneメソッド内でrenderを返すため、以下のエラーが発生します。 Uncaught Error: Invariant Violation: CategoriesSetup.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other …

82 javascript  ajax  asynchronous  reactjs  jquery-deferred 

ほとんどの場合、親タグを持つことは問題ではありません。 React.createClass({ render: function() { return ( <tbody> <tr><td>Item 1</td></tr> <tr><td>Item 2</td></tr> </tbody> ); } }); ただし、親なしで1つのレンダリング関数に兄弟要素を含めることが理にかなっている場合があります。特にテーブルの場合は、テーブルの行をでラップしたくない場合がありますdiv。 React.createClass({ render: function() { return ( <tr><td>Item 1</td></tr> <tr><td>Item 2</td></tr> ); } }); 2番目の例では、次のエラーが発生しますAdjacent XJS elements must be wrapped in an enclosing tag while parsing file。 2つの兄弟要素を、<div>または同様のものでラップせずにレンダリングするにはどうすればよいですか？

82 reactjs 

create-react-appcliを使用して新しいreactアプリケーションを作成しました。次に、'react-redux'を使用してライブラリを追加しましたnpm install --save react-redux。 でpackage.json、私があります。 "react-redux": "^4.4.5" 残念ながら、アプリはコンパイルされず、次のように文句を言います。 Error in ./~/react-redux/lib/utils/wrapActionCreators.js Module not found: 'redux' in C:\Users\Salman\Desktop\Courses\Internship\React\Youtube-Front-End\node_modules\react-redux\lib\utils @ ./~/react-redux/lib/utils/wrapActionCreators.js 6:13-29 どういう意味かわかりません。 完全なコンテナは次のとおりです。 import React,{Component} from 'react'; import {connect} from 'react-redux'; class BookList extends Component{ renderList(){ return this.props.books.map((book)=>{ <li key={book.title} >{book.title}</li> }); } render(){ return( <div> <ul> {this.renderList()} </ul> </div> ); …

82 reactjs  react-redux 

ReactJSで繰り返し要素をレンダリングするコードをいくつか作成しましたが、それがいかに醜いのか嫌いです。 render: function(){ var titles = this.props.titles.map(function(title) { return <th>{title}</th>; }); var rows = this.props.rows.map(function(row) { var cells = []; for (var i in row) { cells.push(<td>{row[i]}</td>); } return <tr>{cells}</tr>; }); return ( <table className="MyClassName"> <thead> <tr>{titles}</tr> </thead> <tbody>{rows}</tbody> </table> ); } これを達成するためのより良い方法はありますか？ （forテンプレートコード内にループを埋め込むか、同様のアプローチを使用したいと思います。）

81 javascript  reactjs 

私はReactに少し慣れておらず、classNameをstring + propとして設定しようとしています。しかし、それを行う方法と、それがベストプラクティスであるかどうかはわかりません。 だから私がやろうとしていること、そしてそれが明らかに機能していないことは、これです： <a data-featherlight='string' + {this.props.data.imageUrl}> これをどうやって書くのですか？

81 reactjs 

私はangularを使用して反応するようになり、条件に基づいて要素をレンダリングする、またはレンダリングしない、angularのng-ifディレクティブに代わる適切な反応を見つけようとしています。このコードを例にとってみましょう。私はtypescript（tsx）を使用していますが、それはそれほど重要ではありません。 "use strict"; import * as React from 'react'; interface MyProps {showMe: Boolean} interface MyState {} class Button extends React.Component <MyProps, MyState>{ constructor(props){ super(props); this.state = {}; } render(){ let button; if (this.props.showMe === true){ button = ( <button type="submit" className="btn nav-btn-red">SIGN UP</button> ) } else { button = null; …

81 reactjs 

webpackを使用してプロジェクトをビルドし、次のwebpack構成に反応しようとしています。 var path = require('path'); var webpack = require('webpack'); module.exports = { entry: [ 'babel-polyfill', './app/less/main.less', './app/main.js', 'webpack-dev-server/client?http://localhost:8080' ], output: { publicPath: '/', filename: 'dist/main.js' }, debug: true, devtool: 'source-map', module: { loaders: [ { test: /\.js$/, include: path.join(__dirname, 'app'), loader: 'babel-loader', query: { presets: ['react', 'es2015'] } }, { …

80 reactjs  webpack  babeljs