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

}

我想在Home组件中的按钮单击User组件中显示更多用户详细信息以代替'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>
    );
  }
}

但是，当您的应用程序增长时，通过父组件管理状态变得非常复杂。你可以使用类似＆＃34; Flux＆＃34;这个架构。＆＃34; Redux的＆＃34;是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>
        );
    }
}

在组件用户中，当您更改输入时，它将调用类Home的方法和Home的更新状态。
现在将更新状态作为组件中的道具获取您刚刚输入的已更改文本

Answer 3

'a'代表什么？

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

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

在我看来，只有当您的应用程序变得非常庞大，并且您不希望在会话期间需要多次服务器调用时才需要Flux或Redux。

作为提示，如果您的User和UserDetails组件只需要可视化数据，您可以尝试使它们成为“无状态”（请参阅stateless components），而不是您不需要处理willReceiveProps。

您可以在Home组件中处理'viewProfile'方法，使用回调从User组件调用它（作为prop传递）

reactjs的正确方法是什么？

3 个答案: