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

ifステートメントを使用するよりも条件付きで小道具を渡すためのより良い方法があるかどうか知りたいです。 たとえば、今私は持っています： var parent = React.createClass({ propTypes: { editable: React.PropTypes.bool.isRequired, editableOpts: React.PropTypes.shape({...}) }, render: function() { if(this.props.editable) { return ( <Child editable={this.props.editableOpts} /> ); } else { // In this case, Child will use the editableOpts from its own getDefaultProps() return ( <Child /> ); } } }); if文なしでこれを書く方法はありますか？私は、JSXの一種のインラインifステートメントに沿って何かを考えていました。 var …

85 javascript  reactjs  inline 

GitHubリポジトリからクローンを作成したばかりのReduxアプリケーションを起動しようとしています。 次のコマンドで実行してみました npm start このエラーが発生します > react-redux@1.0.0 start /home/workspace/assignment > webpack-dev-server --config ./configs/webpack/webpack.config.development.js sh: 1: webpack-dev-server: not found npm ERR! file sh npm ERR! code ELIFECYCLE npm ERR! errno ENOENT npm ERR! syscall spawn npm ERR! react-redux@1.0.0 start: `webpack-dev-server --config ./configs/webpack/webpack.config.development.js` npm ERR! spawn ENOENT npm ERR! npm ERR! Failed …

85 javascript  reactjs  npm  redux  react-redux 

webpackターミナルで実行すると、次のようになります。 Hash: efea76b1048c3a97b963 Version: webpack 1.12.13 Time: 33ms + 1 hidden modules ERROR in Cannot find module 'babel-core' これが私のwebpack.config.jsファイルです module.exports = { entry: './app-client.js', output: { filename: 'public/bundle.js' }, module: { loaders: [ { exclude: /(node_modules|app-server.js)/, loader: 'babel' } ] } } package.json { "name": "react", "version": "1.0.0", "description": "React …

84 javascript  express  reactjs  webpack  babeljs 

そのため、1週間前にReactの学習を開始しましたが、必然的に状態の問題と、コンポーネントがアプリの他の部分とどのように通信するかという問題に直面しました。探し回ったところ、Reduxが今月の味のようです。私はすべてのドキュメントを読みましたが、実際にはかなり革新的なアイデアだと思います。これが私の考えです： 州は一般的にかなり邪悪であり、プログラミングのバグの大きな原因であることに同意しています。アプリ全体に分散させるのではなく、Reduxは、変更するアクションを発行する必要があるグローバル状態ツリーにすべてを集中させないのはなぜですか？面白そう。すべてのプログラムには状態が必要なので、1つの不純なスペースに貼り付け、そこからのみ変更して、バグを簡単に追跡できるようにします。次に、個々の状態の断片をReactコンポーネントに宣言的にバインドし、それらを自動再描画させることもできます。すべてが美しいです。 ただし、このデザイン全体について2つの質問があります。まず、状態ツリーが不変である必要があるのはなぜですか？タイムトラベルのデバッグやホットリロードは気にせず、アプリに元に戻す/やり直しをすでに実装しているとします。これをしなければならないのはとても面倒に思えます： case COMPLETE_TODO: return [ ...state.slice(0, action.index), Object.assign({}, state[action.index], { completed: true }), ...state.slice(action.index + 1) ]; これの代わりに： case COMPLETE_TODO: state[action.index].completed = true; 言うまでもなく、私は学ぶためだけにオンラインホワイトボードを作成しています。すべての状態変更は、コマンドリストにブラシストロークを追加するのと同じくらい簡単かもしれません。しばらくすると（数百のブラシストローク）、このアレイ全体を複製すると、非常に費用と時間がかかるようになる可能性があります。 アクションを介して変更されるUIから独立したグローバル状態ツリーで問題ありませんが、本当に不変である必要がありますか？このような単純な実装（非常にラフなドラフト。1分で記述）の何が問題になっていますか？ var store = { items: [] }; export function getState() { return store; } export function addTodo(text) { store.items.push({ "text": text, "completed", false}); …

84 javascript  reactjs  state  immutability  redux 

関数コンポーネントがあり、強制的に再レン​​ダリングしたいと思います。 どうすればよいですか？ インスタンスthisがないので、呼び出すことはできませんthis.forceUpdate()。

84 javascript  reactjs 

TypeScriptをReactで使用React.Propsすると、コンパイラがすべてのReactコンポーネントの小道具に子を含めることができることを認識するために拡張する必要がなくなります。 interface MyProps { } class MyComponent extends React.Component<MyProps, {}> { public render(): JSX.Element { return <div>{this.props.children}</div>; } } ただし、ステートレス機能コンポーネントの場合はそうではないようです。 const MyStatelessComponent = (props: MyProps) => { return ( <div>{props.children}</div> ); }; コンパイルエラーを発行します： エラー：（102、17）TS2339：プロパティ「children」はタイプ「MyProps」に存在しません。 これは、バニラ関数がchildrenprops引数で指定されることをコンパイラーが知る方法が実際にはないためだと思います。 では、問題は、TypeScriptのステートレス関数型コンポーネントで子をどのように使用する必要があるかということです。 以前の方法に戻ることもできますMyProps extends React.Propsが、Propsインターフェイスは非推奨としてマークされており、ステートレスコンポーネントはProps.ref、私が理解しているように、を持っていないか、サポートしていません。 したがって、children小道具を手動で定義できます。 interface MyProps { children?: React.ReactNode; } まず：ReactNode正しいタイプですか？ 2番目：子をオプション（?）として記述する必要があります。そうしないと、コンシューマーはそれchildrenがコンポーネント（）の属性であると考え<MyStatelessComponent children={} />られ、値が指定されていない場合はエラーが発生します。 …

84 reactjs  typescript 

githubにコミットするときのために、APIキーを非表示にしようとしています。フォーラムを調べて、ガイダンス、特に次の投稿を探しました。 create-react-appでAPIキーを非表示にするにはどうすればよいですか？ 変更を加えて、糸を再開しました。何が間違っているのかわかりません-.envプロジェクトのルートにファイルを追加し（名前を付けましたprocess.env）、ファイルにファイルを追加しましたREACT_APP_API_KEY = 'my-secret-api-key'。 fetchApp.jsでキーを追加する方法かもしれないと思っており、テンプレートリテラルを使用しないなど、複数の形式を試しましたが、プロジェクトはまだコンパイルされません。 どんな助けでも大歓迎です。 performSearch = (query = 'germany') => { fetch(`https://api.unsplash.com/search/photos?query=${query}&client_id=${REACT_APP_API_KEY}`) .then(response => response.json()) .then(responseData => { this.setState({ results: responseData.results, loading: false }); }) .catch(error => { console.log('Error fetching and parsing data', error); }); } コードスニペットを実行する結果を非表示スニペットを展開

84 reactjs  environment-variables  api-key 

CustomEvent親ノードと通信するために、通常のDOMを作成してリッスンしています。 子供の場合： var moveEvent = new CustomEvent('the-graph-group-move', { detail: { nodes: this.props.nodes, x: deltaX, y: deltaY }, bubbles: true }); this.getDOMNode().dispatchEvent(moveEvent); 親の場合： componentDidMount: function () { this.getDOMNode().addEventListener("the-graph-group-move", this.moveGroup); }, これは機能しますが、より良いReact固有の方法はありますか？

84 reactjs 

React 16では、属性をDOMに渡すことができます。つまり、classNameの代わりに「class」を使用できるということですよね？ 以前のバージョンのReactとの下位互換性に加えて、クラスよりもclassNameを使用することに利点があるかどうか疑問に思っています。

84 reactjs 

私はこのコンポーネントを持っています： import React from 'react'; export default class AddItem extends React.Component { add() { this.props.onButtonClick(this.input.value); this.input.value = ''; } render() { return ( <div className="add-item"> <input type="text" className="add-item__input" ref={(input) => this.input = input} placeholder={this.props.placeholder} /> <button disabled={!this.input.value} className="add-item__button" onClick={this.add.bind(this)}>Add</button> </div> ); } } 入力値が空のときにボタンを無効にしたい。しかし、上記のコードは機能しません。それは言う： add-item.component.js：78 Uncaught TypeError：undefinedのプロパティ 'value'を読み取れません を指していdisabled={!this.input.value}ます。ここで何が間違っているのでしょうか？renderメソッドの実行時にrefがまだ作成されていないのではないかと思います。もしそうなら、回避策は何ですか？

84 javascript  reactjs 

Reactステートレスコンポーネントでイベントハンドラーを作成するための最適な方法を見つけようとしています。私はこのようなことをすることができます： const myComponent = (props) => { const myHandler = (e) => props.dispatch(something()); return ( <button onClick={myHandler}>Click Me</button> ); } ここでの欠点は、このコンポーネントがレンダリングされるたびに、新しい「myHandler」関数が作成されることです。コンポーネントのプロパティにアクセスできるステートレスコンポーネントでイベントハンドラーを作成するためのより良い方法はありますか？

84 javascript  reactjs 

reactjsルーターからLinkコンポーネントを使用していますが、onClickeventを機能させることができません。これはコードです： <Link to={this.props.myroute} onClick='hello()'>Here</Link> これはそれを行う方法ですか、それとも別の方法ですか？

84 reactjs  react-router  react-redux 

私は以下のようなルーターを持っています： <Router history={hashHistory}> <Route path="/" component={App}> <IndexRoute component={Index}/> <Route path="login" component={Login}/> </Route> </Router> これが私が達成したいことです： /loginログインしていない場合は、ユーザーをにリダイレクトします ユーザー/loginがすでにログインしているときにアクセスしようとした場合は、rootにリダイレクトします/ 今私は、ユーザーの状態を確認しようとしているAppのcomponentDidMountような何かを、その後、： if (!user.isLoggedIn) { this.context.router.push('login') } else if(currentRoute == 'login') { this.context.router.push('/') } ここでの問題は、現在のルートを取得するためのAPIが見つからないことです。 このクローズされた問題は、Router.ActiveStateミックスインとルートハンドラーの使用が示唆されていることがわかりましたが、これら2つのソリューションは現在非推奨になっているようです。

83 javascript  reactjs  react-router 

改行を含むテキスト文字列があり、次のようにレンダリングするとします。 render() { var text = "One\nTwo\nThree"; return <div>{text}</div>; } HTMLでは、改行は改行として表示されません。Reactでこれをどのように行う必要がありますか？<br>タグに変換して使用したくありませんdangerouslySetInnerHTML。別の方法はありますか？

83 reactjs 

ボタンクリックのシミュレーションは、非常に簡単で標準的な操作のようです。それでも、Jest.jsテストで動作させることはできません。 これは私が試したものです（そしてjQueryを使用してそれを実行しました）が、何もトリガーされなかったようです： import { mount } from 'enzyme'; page = <MyCoolPage />; pageMounted = mount(page); const button = pageMounted.find('#some_button'); expect(button.length).toBe(1); // It finds it alright button.simulate('click'); // Nothing happens

83 javascript  reactjs  testing  jestjs  enzyme