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

セットアップしましたeslint＆eslint-plugin-react。 ESLintを実行すると、リンターはno-unused-varsReactコンポーネントごとにエラーを返します。 JSXまたはReact構文を使用していることを認識していないと思います。何か案は？ 例： app.js import React, { Component } from 'react'; import Header from './header.js'; export default class App extends Component { render() { return ( <div> <Header /> {this.props.children} </div> ); } } リンターエラー： /my_project/src/components/app.js 1:8 error 'React' is defined but never used no-unused-vars 2:8 error 'Header' is …

91 javascript  reactjs  jsx  eslint 

react-selectの使用に問題があります。私はreduxフォームを使用しており、react-selectコンポーネントをreduxフォームと互換性のあるものにしました。コードは次のとおりです。 const MySelect = props => ( <Select {...props} value={props.input.value} onChange={value => props.input.onChange(value)} onBlur={() => props.input.onBlur(props.input.value)} options={props.options} placeholder={props.placeholder} selectedValue={props.selectedValue} /> ); そしてここで私はそれをどのようにレンダリングするか： <div className="select-box__container"> <Field id="side" name="side" component={SelectInput} options={sideOptions} clearable={false} placeholder="Select Side" selectedValue={label: 'Any', value: 'Any'} /> </div> しかし、問題は、ドロップダウンに希望どおりのデフォルト値がないことです。私が間違っているのは何ですか？何か案は？

91 reactjs  default-value  react-select 

私はreactルーターで問題を抱えています（私はバージョン^ 4.0.0を使用しています）。 これは私のindex.jsです import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './index.css'; import { Router, Route, Link, browserHistory } from 'react-router'; ReactDOM.render( <Router history={browserHistory} > <Route path="/" component={App} /> </Router>, document.getElementById('root') ); App.jsは何でもあります。私はここに基本的なものを投稿しています、それは問題ではないからです（私は信じています） import React, { Component } from 'react'; import logo from './logo.svg'; import …

91 javascript  json  reactjs  react-router 

前のページに戻るにはどうすればよいかを理解しようとしています。使ってます[react-router-v4][1] これは、最初のランディングページで構成したコードです。 <Router> <div> <Link to="/"><div className="routerStyle"><Glyphicon glyph="home" /></div></Link> <Route exact path="/" component={Page1}/> <Route path="/Page2" component={Page2}/> <Route path="/Page3" component={Page3}/> </div> </Router> 次のページに転送するために、私は単に次のことを行います。 this.props.history.push('/Page2'); ただし、どうすれば前のページに戻ることができますか？下記のようないくつかのことを試しましたが、運がありません：1。this.props.history.goBack(); エラーが発生します： TypeError：nullはオブジェクトではありません（ 'this.props'を評価しています） this.context.router.goBack(); エラーが発生します： TypeError：nullはオブジェクトではありません（ 'this.context'を評価しています） this.props.history.push('/'); エラーが発生します： TypeError：nullはオブジェクトではありません（ 'this.props'を評価しています） Page1以下にコードを投稿します。 import React, {Component} from 'react'; import {Button} from 'react-bootstrap'; class Page1 extends Component { …

91 javascript  reactjs  react-router-v4 

タイトルがすべてを物語っていると思います。まだフェッチしているコンポーネントをアンマウントするたびに、黄色の警告が表示されます。 コンソール 警告：マウントされていないコンポーネントを呼び出すsetState（またはforceUpdate）ことはできません。これは何の操作でもありませんが...修正するには、componentWillUnmountメソッド内のすべてのサブスクリプションと非同期タスクをキャンセルします。 constructor(props){ super(props); this.state = { isLoading: true, dataSource: [{ name: 'loading...', id: 'loading', }] } } componentDidMount(){ return fetch('LINK HERE') .then((response) => response.json()) .then((responseJson) => { this.setState({ isLoading: false, dataSource: responseJson, }, function(){ }); }) .catch((error) =>{ console.error(error); }); }

90 reactjs 

私はこれに対する答えを探し回ってみましたが、それらのほとんどはReactのコンテキスト外にあり、onChangeブラー時にトリガーされます。 さまざまなテストを実行しているときに、これら2つのイベントがどのように異なるのか（テキスト領域に適用した場合）がわかりません。誰かがこれに光を当てることができますか？

90 javascript  reactjs  dom-events 

私は時々としてレンダリングする必要がありますコンポーネント持ち<anchor>ようや他の回<div>。これpropを判断するために読んだのはthis.props.urlです。 存在する場合は、コンポーネントをでラップしてレンダリングする必要があります<a href={this.props.url}>。それ以外の場合は、としてレンダリングされます<div/>。 可能？ これは私が今していることですが、単純化できると感じています。 if (this.props.link) { return ( <a href={this.props.link}> <i> {this.props.count} </i> </a> ); } return ( <i className={styles.Icon}> {this.props.count} </i> ); 更新： これが最後のロックアップです。先端をありがとう、@ Sulthan！ import React, { Component, PropTypes } from 'react'; import classNames from 'classnames'; export default class CommentCount extends Component { static propTypes = …

90 javascript  reactjs 

反応コンポーネントのブール状態を切り替える方法を知りたいのですが。例えば： コンポーネントのコンストラクターにブール状態チェックがあります。 constructor(props, context) { super(props, context); this.state = { check: false }; }; this.setStateメソッドを使用して、チェックボックスがクリックされるたびに状態を切り替えようとしています。 <label><input type=checkbox" value="check" onChange = {(e) => this.setState({check: !check.value})}/> Checkbox </label> もちろん、Uncaught ReferenceErrorが発生します：チェックが定義されていません。では、どうすればこれを達成できますか？ よろしくお願いします。

90 javascript  reactjs  reactjs-flux 

ReactRouterに新しいタブでリンクを開かせる方法はありますか？私はこれを試しましたが、うまくいきませんでした。 <Link to="chart" target="_blank" query={{test: this.props.test}} >Test</Link> 次のようなものを追加することでそれを綿毛にすることが可能です onClick="foo"にリンクに次のようなものをことは可能ですが、コンソールエラーが発生します。 ありがとう。

90 reactjs  react-router 

ドロップダウンコンポーネントの外側でクリックが発生したときにドロップダウンメニューを閉じたいのですが。 それ、どうやったら出来るの？

89 reactjs 

簡単な切り替えがあるとしましょう： ボタンをクリックすると、色コンポーネントが赤と青の間で変化します 私はこのようなことをすることによってこの結果を達成するかもしれません。 index.js Button: onClick={()=>{dispatch(changeColor())}} Color: this.props.color ? blue : red container.js connect(mapStateToProps)(indexPage) action_creator.js function changeColor(){ return {type: 'CHANGE_COLOR'} } reducer.js switch(){ case 'CHANGE_COLOR': return {color: true} しかし、これは、jQuery、いくつかのクラス、および一部のcssを使用して5秒で達成できた何かのために作成する多くのコードの地獄です... だから私が本当に求めていることは、ここで何が間違っているのでしょうか？

89 javascript  reactjs  redux 

Fluxを使用するようにアプリを書き換えていますが、ストアからのデータの取得に問題があります。私はたくさんのコンポーネントを持っていて、それらはたくさん入れ子になっています。それらのいくつかは大きく（Article）、いくつかは小さくてシンプルです（UserAvatar、UserLink）。 私はストアからデータを読み取る必要があるコンポーネント階層のどこに苦労してきました。 私は2つの極端なアプローチを試しましたが、どちらもかなり気に入りました。 すべてのエンティティコンポーネントが独自のデータを読み取る Storeからのデータを必要とする各コンポーネントは、エンティティIDのみを受け取り、エンティティを独自に取得します。 たとえば、Article渡されarticleId、UserAvatarそしてUserLink渡されますuserId。 このアプローチには、いくつかの重大な欠点があります（コードサンプルで説明）。 var Article = React.createClass({ mixins: [createStoreMixin(ArticleStore)], propTypes: { articleId: PropTypes.number.isRequired }, getStateFromStores() { return { article: ArticleStore.get(this.props.articleId); } }, render() { var article = this.state.article, userId = article.userId; return ( <div> <UserLink userId={userId}> <UserAvatar userId={userId} /> </UserLink> <h1>{article.title}</h1> <p>{article.text}</p> <p>Read more by <UserLink …

89 javascript  reactjs  reactjs-flux 

私は本質的にタブを反応させようとしていますが、いくつか問題があります。 こちらがファイルです page.jsx <RadioGroup> <Button title="A" /> <Button title="B" /> </RadioGroup> ボタンAをクリックすると、RadioGroupコンポーネントはボタンBの選択を解除する必要があります。 「選択された」とは、状態またはプロパティのclassNameを意味します ここにありRadioGroup.jsxます： module.exports = React.createClass({ onChange: function( e ) { // How to modify children properties here??? }, render: function() { return (<div onChange={this.onChange}> {this.props.children} </div>); } }); のソースは特にButton.jsx問題ではありません。ネイティブのDOM onChangeイベントをトリガーする通常のHTMLラジオボタンがあります。 予想されるフローは次のとおりです。 ボタン「A」をクリックします ボタン「A」は、RadioGroupにバブルアップするonChange、ネイティブDOMイベントをトリガーします RadioGroup onChangeリスナーが呼び出されます RadioGroupはボタンBの選択を解除する必要があります。これが私の質問です。 これが私が遭遇している主な問題です：sをに移動できません<Button>RadioGroup。これの構造は、子が任意であるようなものだからです。つまり、マークアップは <RadioGroup> …

89 reactjs 

Reactで無限スクロールを実装する方法を探しています。私はreact-infinite-scrollに出くわしましたが、それはDOMにノードを追加するだけで、それらを削除しないため、非効率的であることがわかりました。DOMに一定数のノードを追加、削除、維持するReactの実証済みのソリューションはありますか？ これがjsfiddleの問題です。この問題では、一度にDOMに50個の要素のみを含めたいと思います。他のものは、ユーザーが上下にスクロールするときにロードおよび削除する必要があります。最適化アルゴリズムのため、Reactの使用を開始しました。今、私はこの問題の解決策を見つけることができませんでした。私はairbnbinfinitejsに出くわしました。ただし、Jqueryで実装されています。このairbnb無限スクロールを使用するには、やりたくないReactの最適化を失う必要があります。 スクロールを追加したいサンプルコードは次のとおりです（ここではすべてのアイテムをロードしています。私の目標は一度に50個のアイテムのみをロードすることです） /** @jsx React.DOM */ var Hello = React.createClass({ render: function() { return (<li>Hello {this.props.name}</li>); } }); var HelloList = React.createClass({ getInitialState: function() { var numbers = []; for(var i=1;i<10000;i++){ numbers.push(i); } return {data:numbers}; }, render: function(){ var response = this.state.data.map(function(contact){ return (<Hello name="World"></Hello>); }); return (<ul>{response}</ul>) } …

89 javascript  html  infinite-scroll  reactjs 

子コンポーネントから親に対してsetStateを実行するための推奨パターンは何ですか。 var Todos = React.createClass({ getInitialState: function() { return { todos: [ "I am done", "I am not done" ] } }, render: function() { var todos = this.state.todos.map(function(todo) { return <div>{todo}</div>; }); return <div> <h3>Todo(s)</h3> {todos} <TodoForm /> </div>; } }); var TodoForm = React.createClass({ getInitialState: function() { return …

89 reactjs