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

クラス内にコンポーネントを記述する代わりに、関数構文を使用したいと思います。 関数コンポーネント内でをオーバーライドするにcomponentDidMountはどうすればよいcomponentWillMountですか？ 可能ですか？ const grid = (props) => { console.log(props); let {skuRules} = props; const componentDidMount = () => { if(!props.fetched) { props.fetchRules(); } console.log('mount it!'); }; return( <Content title="Promotions" breadcrumbs={breadcrumbs} fetched={skuRules.fetched}> <Box title="Sku Promotion"> <ActionButtons buttons={actionButtons} /> <SkuRuleGrid data={skuRules.payload} fetch={props.fetchSkuRules} /> </Box> </Content> ) }

134 reactjs  redux 

同様の質問がありますが、複数の機能を持つファイルを作成できません。RNは非常に速く進化しているため、この方法がすでに時代遅れであるかどうかはわかりません。反応ネイティブでグローバルヘルパー関数を作成する方法 React Nativeは初めてです。 私がやりたいことは、多くの再利用可能な関数でいっぱいのjsファイルを作成し、それをコンポーネントにインポートして、そこから呼び出すことです。 私がこれまでやってきたことはばかげているように見えるかもしれませんが、あなたがそれをここで求めるようにあなたがそれを要求することを知っています。 Chanduというクラス名を作成して、このようにエクスポートしてみました 'use strict'; import React, { Component } from 'react'; import { AppRegistry, Text, TextInput, View } from 'react-native'; export default class Chandu extends Component { constructor(props){ super(props); this.papoy = { a : 'aaa' }, this.helloBandu = function(){ console.log('Hello Bandu'); }, } helloChandu(){ console.log('Hello Chandu'); …

133 reactjs  react-native 

私はReactでコンポーネントを構築しました。これは、ウィンドウスクロールで独自のスタイルを更新して視差効果を作成することになっています。 コンポーネントrenderメソッドは次のようになります。 function() { let style = { transform: 'translateY(0px)' }; window.addEventListener('scroll', (event) => { let scrollTop = event.srcElement.body.scrollTop, itemTranslate = Math.min(0, scrollTop/3 - 60); style.transform = 'translateY(' + itemTranslate + 'px)'); }); return ( <div style={style}></div> ); } Reactはコンポーネントが変更されたことを認識していないため、これは機能しません。したがって、コンポーネントは再レンダリングされません。 の値をitemTranslateコンポーネントの状態に保存setStateし、スクロールコールバックを呼び出してみました。ただし、スクロールが非常に遅いため、スクロールが使用できなくなります。 これを行う方法について何か提案はありますか？

133 javascript  reactjs 

私は現在Reactでフックの概念を学び、以下の例を理解しようとしています。 import { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } 上記の例は、ハンドラー関数パラメーター自体のカウンターをインクリメントします。イベントハンドラー関数内のカウント値を変更したい場合 以下の例を検討してください setCount = () => …

133 javascript  reactjs  react-native  react-hooks 

useStateコンポーネントの状態を設定するためのReactフックが導入されました。しかし、以下のコードのように、フックを使用してコールバックを置き換えるにはどうすればよいですか？ setState( { name: "Michael" }, () => console.log(this.state) ); 状態が更新された後、何かしたいです。 私useEffectは余分なことをするために使用できることを知っていますが、ビットコードを必要とする前の状態の値をチェックする必要があります。useStateフックで使える簡単な解決策を探しています。

133 reactjs 

Fluxについて読んでいますが、Todoアプリの例は単純すぎて、いくつかの重要なポイントを理解できません。 ユーザープロフィールページを備えたFacebookのような単一ページのアプリを想像してみてください。各ユーザープロファイルページで、無限のスクロールでユーザー情報とその最後の投稿を表示します。ユーザープロファイル間を移動できます。 Fluxアーキテクチャーでは、これはどのようにストアとディスパッチャーに対応しますか？ PostStoreユーザーごとに1つ使用するのでしょうか、それとも何らかのグローバルストアを使用するのでしょうか。ディスパッチャーについてはどうですか？「ユーザーページ」ごとに新しいDispatcherを作成しますか、それともシングルトンを使用しますか？最後に、ルートの変更に応じて「ページ固有」ストアのライフサイクルを管理するのは、アーキテクチャのどの部分ですか。 さらに、単一の疑似ページには、同じタイプのデータの複数のリストがある場合があります。たとえば、プロフィールページで、フォロワーとフォローの両方を表示したいとします。UserStoreこの場合、シングルトンはどのように機能しますか？だろUserPageStore管理followedBy: UserStoreとfollows: UserStore？

132 javascript  facebook  architecture  reactjs  reactjs-flux 

コンポーネントの状態で配列から要素を削除する最良の方法を見つけようとしています。this.state変数を直接変更するべきではないので、配列から要素を削除するより良い方法（より簡潔）はここにあるものよりも優れていますか？ onRemovePerson: function(index) { this.setState(prevState => { // pass callback in setState to avoid race condition let newData = prevState.data.slice() //copy array from prevState newData.splice(index, 1) // remove element return {data: newData} // update state }) }, ありがとうございました。 更新しました これは、setStateでコールバックを使用するように更新されました。これは、更新中に現在の状態を参照するときに行う必要があります。

131 javascript  reactjs 

ドロップダウンの高さと画面上の入力の位置に応じて、ドロップダウンを入力の下または上に移動するスクリプトを書いています。また、修飾子をその方向に応じてドロップダウンに設定したいと思います。しかし、setState内部で使用componentDidUpdateすると無限ループが発生します（これは明らかです） getDOMNodeclassnameを直接使用してドロップダウンに設定することで解決策を見つけましたが、Reactツールを使用するより良い解決策があるはずです。誰かが私を助けてくれますか？ 以下は、機能するコードの一部ですgetDOMNode（コードを簡略化するためにポジショニングロジックを少し無視しています）。 let SearchDropdown = React.createClass({ componentDidUpdate(params) { let el = this.getDOMNode(); el.classList.remove('dropDown-top'); if(needToMoveOnTop(el)) { el.top = newTopValue; el.right = newRightValue; el.classList.add('dropDown-top'); } }, render() { let dataFeed = this.props.dataFeed; return ( <DropDown > {dataFeed.map((data, i) => { return (<DropDownRow key={response.symbol} data={data}/>); })} </DropDown> ); } }); そしてこれがsetstateを含むコードです（これは無限ループを作成します） let …

131 javascript  reactjs  ecmascript-6 

ReactJSとReact-Routerは初めてです。propsを介し<Link/>てreact-routerからオブジェクトを受け取るコンポーネントがあります。ユーザーがこのコンポーネント内の「次へ」ボタンをクリックするたびに、<Link/>オブジェクトを手動で呼び出します。 現在、refsを使用してバッキングインスタンスにアクセスし、<Link/>生成された「a」タグを手動でクリックしています。 質問：リンクを手動で呼び出す方法はありthis.props.next.goますか（例：）？ これは私が現在持っているコードです： //in MasterPage.js var sampleLink = <Link to="/sample">Go To Sample</Link> <Document next={sampleLink} /> //in Document.js ... var Document = React.createClass({ _onClickNext: function() { var next = this.refs.next.getDOMNode(); next.querySelectorAll('a').item(0).click(); //this sounds like hack to me }, render: function() { return ( ... <div ref="next">{this.props.next} <img src="rightArrow.png" onClick={this._onClickNext}/></div> ... …

131 javascript  reactjs  react-router 

Reactを使用してWebアプリケーションを開発するときにデフォルトとなった、react-router-domという名前の最新バージョンのreact-routerモジュールを使用しています。POSTリクエスト後にリダイレクトを行う方法を知りたい。私はこのコードを作成していますが、リクエスト後、何も起こりません。私はウェブでレビューしましたが、すべてのデータは以前のバージョンの反応ルーターに関するものであり、最後の更新ではありません。 コード： import React, { PropTypes } from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import { Redirect } from 'react-router' import SignUpForm from '../../register/components/SignUpForm'; import styles from './PagesStyles.css'; import axios from 'axios'; import Footer from '../../shared/components/Footer'; class SignUpPage extends React.Component { constructor(props) { super(props); this.state …

131 javascript  reactjs  react-router 

Reactマップコンポーネントをプロジェクトに追加しようとしていますが、エラーが発生します。Fullstack Reactのブログ投稿を参考にしています。エラーがスローされる場所をgoogle_map.jsの83行目で追跡しました。 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } これが私の地図コンポーネントです。最後の3行である58〜60行目をコメントアウトすると、ページは（マップなしで）正常にロードされます。編集：@Dmitriy Nevzorovが提案した変更を加えましたが、それでも同じエラーが発生します。 import React from 'react' import GoogleApiComponent from 'google-map-react' export class LocationsContainer extends React.Component { constructor() { super() } render() { const style = { width: '100vw', …

130 javascript  google-maps  reactjs  ecmascript-6  react-router 

話は、ボブ、サリー、ジャックを箱に入れることができるはずです。どちらも箱から取り出せます。取り外すと、スロットは残りません。 people = ["Bob", "Sally", "Jack"] 「ボブ」を削除する必要があります。新しい配列は次のようになります。 ["Sally", "Jack"] これが私の反応コンポーネントです： ... getInitialState: function() { return{ people: [], } }, selectPeople(e){ this.setState({people: this.state.people.concat([e.target.value])}) }, removePeople(e){ var array = this.state.people; var index = array.indexOf(e.target.value); // Let's say it's Bob. delete array[index]; }, ... ここでは、最小限のコード（onClickなど）があるので、それを示します。重要な部分は、配列から「Bob」を削除、削除、破棄することremovePeople()ですが、呼び出されても機能しません。何か案は？私はこれを見ていましたが、Reactを使用しているため、何か間違っている可能性があります。

130 javascript  arrays  reactjs 

私はAngular開発者で、Reactが初めてです。これは単純なreactコンポーネントですが、機能しません import react , { Component} from 'react'; import { render } from 'react-dom'; class TechView extends Component { constructor(props){ super(props); this.state = { name:'Gopinath' } } render(){ return( <span>hello Tech View</span> ); } } export default TechView; エラー： JSXのreact / react-in-jsx-scopeを使用する場合、「React」はスコープ内にある必要があります

129 reactjs 

Reactイベントの正しいタイプは何ですか。最初はany、単純にするために使用しました。今、私は物事をきれいにし、any完全に使用しないようにしています。 したがって、次のような単純な形式になります。 export interface LoginProps { login: { [k: string]: string | Function uname: string passw: string logIn: Function } } @inject('login') @observer export class Login extends Component<LoginProps, {}> { update = (e: React.SyntheticEvent<EventTarget>): void => { this.props.login[e.target.name] = e.target.value } submit = (e: any): void => { this.props.login.logIn() e.preventDefault() …

129 javascript  reactjs  typescript 

作成、読み取り、更新、削除に使用するフォームを1つ取得しました。同じフォームで3つのコンポーネントを作成しましたが、異なるプロップを渡しました。CreateForm.js、ViewForm.js（削除ボタンでは読み取り専用）、UpdateForm.jsを取得しました。 以前はPHPを使用していたため、これらを常に1つの形式で行いました。 ストアの管理にはReactとReduxを使用しています。 CreateFormコンポーネントを使用しているときに、サブコンポーネントにこのプロパティを渡して、createForm={true}入力に値を入力せず、無効にしないようにします。私のViewFormコンポーネントでは、この小道具を渡しますreadonly="readonly"ます。 そして、値で満たされていて更新できないtextareaで別の問題が発生しました。値を持つ反応テキストエリアは読み取り専用ですが、更新する必要があります フォームのこれらの異なる状態を処理するコンポーネントを1つだけ持つのに最適な構造は何ですか？ 共有するアドバイス、チュートリアル、ビデオ、デモはありますか？

128 javascript  reactjs  crud  redux