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

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”的更多用户详细信息是正确的方法以及它如何完成？在此先感谢..

Answer 1

有两种方法。首先是仅使用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像架构最常见的方式。

Answer 2

您可以发送事件作为道具，并从其他组件调用它。

假设你有一个类

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

什么是“一”代表什么？

首先，谁在查询您的用户数据？

我认为Home必须处理服务器调用，然后您需要将这些数据存储在Home组件的状态中，然后您需要将它们作为道具传递给User和UserDetails组件。

在我看来，只有当您的应用程序变得非常大时，才需要Flux或Redux，并且您不希望在会话期间需要多次服务器调用。作为一个提示，如果你的User和UserDetails组件只需要可视化数据，你可以尝试使它们成为'无状态的'（参见stateless components），而不是你不需要处理willReceiveProps的方式。

您可以处理在家庭成分“自拍”的方法，我使用的终极版从回调（作为道具通过）