reactjsの正しい方法は何ですか？

Question

私は反応するのが新しいです。私のプロジェクトでは、私はHomeコンポーネントを持っています。

class Home extends Component { 

     logOut(){ 
      console.log('log out in side home js'); 
      this.props.LogOutAction(); 
      localStorage.setItem('loginFlag', null); 
     } 

     render(){ 

       return(
         <div> 
          <Header /> 
          <br/> 
          <div className="col-md-12 "> 
           <div className="col-md-3 home-border"> 
             a 
           </div> 
           <div className="col-md-6 home-border"> 
            <User/> 

           </div> 
           <div className="col-md-3 home-border"> 
             c 
           </div> 
          </div> 
         </div> 
       ) 
     } 
} 

そして、私のUserコンポーネントは、私はUser Component.WhatでのボタンのクリックでHomeコンポーネントに「C」の代わりに、より多くのユーザの詳細を表示したい

class User extends React.Component { 

     viewProfile(id){ 

     } 

     render() { 
       var userdetails  = [ {"id":"1", "name":"Abraham", "country": "USA", "age":"29", "image":""}, 
              {"id":"2", "name":"Gregory", "country": "Canada", "age":"23", "image":""}, 
              {"id":"3", "name":"Mathews", "country": "Newzeland", "age":"24", "image":""}, 
              {"id":"4", "name":"Williamson", "country": "China", "age":"27", "image":""}, 
              {"id":"5", "name":"Edwerd", "country": "Germany", "age":"22", "image":""} 
           ]; 
       var myStyle = { 
             border:"1px solid black", 
             height:"170px", 
           } 

       return(
         <div> 
          <div> 
           {userdetails.map((data, i) => <div className="col-md-12 div-bottom" style={myStyle} key={i}> 

             <div className="col-md-12"> 
              <div className="col-md-12"> 
               <img className="img-thumbnail img-margin" width="150" height="236" src = {'profile.jpg'} /> 
              </div> 
              <div className="col-md-12 div-bottom"><label>{data.name}</label></div> 
              <div className="col-md-12 div-bottom"> 
               <div className="col-md-6"><label>age:</label> {data.age}</div> 
               <div className="col-md-3"><label>Country:</label> {data.country}</div> 
              </div> 
              <div className="col-md-4 .div-bottom"><button className="btn btn-primary" onClick={ () => { this.viewProfile(data.id) } }>view Profile</button></div> 
             </div> 
            </div>) 
           } 
          </div> 
         </div> 
       ) 
     } 

} 

が正しいです方法とそれがどのようにできるか？ありがとうございます。

Answer 1

2つのアプローチがあります。まず、Reactのみを使用します。アプリの状態を含む親コンポーネントを作成します。親コンポーネントでは、状態を変更する関数を作成できます。関数をユーザコンポーネントに渡し、状態をホームコンポーネントに渡すことができます。

簡体：しかし

const Home = ({ user }) => <div>{user.name}</div>; 
const User = ({ changeUser }) => { 
    const users = [ 
    { name: 'User1' }, 
    { name: 'User2' }, 
    ]; 

    const renderUsers =() => users.map(
    user => <li onClick={() => changeUser(user)}>{user.name}</li> 
); 

    return <ul>{renderUsers()}</ul>; 
}; 

class Parent extends React.Component { 
    constructor(props) { 
    super(props); 

    this.changeUser = this.changeUser.bind(this); 

    this.state = { user: null }; 
    } 

    changeUser(user) { 
    this.setState({ user }); 
    } 

    render() { 
    return (
     <div> 
     <Home user={this.state.user} /> 
     <User changeUser={this.changeUser} /> 
     </div> 
    ); 
    } 
} 

、あなたのアプリケーションは、それが親コンポーネントを経由して状態を管理することが非常に複雑になる成長します。これには "Flux"アーキテクチャのようなものを使うことができます。 "Redux"は、RexのようなFluxを構築するための最も一般的な方法です。

Answer 2

イベントをpropsとして送信し、他のコンポーネントから呼び出すことができます。

は、あなたが入力を変更したときにここではコンポーネントのユーザーが、それはクラストップの メソッドを呼び出し、状態を更新しますあなたは、クラスに

Class Home { 

    handleChange(evt) { 
     this.setState({ username: evt.target.value }); 
    } 

    render { 
     return ( 
      <div> 
       <Users name={this.state.username} onChange={this.handleChange}/> 
       <div> {this.state.username} </div> 
      </div> 
     ); 
    } 
} 

子コンポーネント

Class Users { 

    handleChange() { 
     //logic 
    } 

    render { 
     return (
      <div> 
       <input type="text" onChange={this.props.onChange}/> 
       {this.props.name} 
      </div> 
     ); 
    } 
} 

• を持っていると言いますホームの
• 今すぐコンポーネントのユーザーで小道具として更新された状態を得ることが あなたがちょうど何「」のために立つ

Answer 3

に入っ変更されたテキストを、あなたを与えるのだろうか？

まず、誰があなたにユーザーのデータを問い合わせますか？

ホームはサーバコールを処理しなければならないと思うので、そのデータをホームコンポーネントの状態に保存する必要があります。次に、それらのデータをUserコンポーネントとUserDetailsコンポーネントに渡す必要があります。

FluxまたはReduxは、アプリケーションが本当に大きくなり、セッション中に多くのサーバーコールを必要としたくない場合にのみ必要です。

ヒントとして、UserとUserDetailsコンポーネントがデータを視覚化する必要がある場合は、willReceivePropsを処理する必要がない方法で、「ステートレス」（stateless componentsを参照）を試みることができます。

あなたは[OK]を、私はReduxのを使用しています（小道具として渡された）コールバック