reactjs中的正確方法是什麼？

我是新來的反應。在我的項目中，我有一個Home組件。reactjs中的正確方法是什麼？

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成分是

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> 
       ) 
     } 

}

我要顯示在該User Component.What按鈕點擊Home組件到位「C」的更多用戶詳細信息是正確的方法以及它如何完成？在此先感謝..

來源

2017-07-07 sojimon c y

有兩種方法。首先是僅使用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」是React世界中建立Flux像架構最常見的方式。

來源

2017-07-07 06:43:54

好的用戶組件調用它。 –

您可以發送事件作爲道具，並從其他組件調用它。

假設你有一個類

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> 
     ); 
    } 
}

在這裏，在組件的用戶，當您更改輸入將首頁調用類的方法和更新狀態家庭。
現在獲得更新的狀態，如部分用戶的道具會給你修改文本您剛纔輸入

來源

2017-07-07 07:03:21

什麼是「一」代表什麼？

首先，誰在查詢您的用戶數據？

我認爲Home必須處理服務器調用，然後您需要將這些數據存儲在Home組件的狀態中，然後您需要將它們作爲道具傳遞給User和UserDetails組件。

在我看來，只有當您的應用程序變得非常大時，才需要Flux或Redux，並且您不希望在會話期間需要多次服務器調用。作爲一個提示，如果你的User和UserDetails組件只需要可視化數據，你可以嘗試使它們成爲'無狀態的'（參見stateless components），而不是你不需要處理willReceiveProps的方式。

您可以處理在家庭成分「自拍」的方法，我使用的終極版從回調（作爲道具通過）

來源

2017-07-07 07:18:43

reactjs中的正確方法是什麼？

回答

相關問題