Question

很多基本问题。我可以将state属性传递给另一个组件吗？因此，如果我创建一个登录应用程序，并且在从API调用成功登录后，我将loggedInUser: 12345的状态设置为名为Login.js的组件

export default class Login extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data:[],
            loggedInUser: 12345
        }
    }

    render(){

        return(
            //Return the this.state.loggedInUser
        )

    }
}

如何将this.state.loggedInUser从Login.js传递到我导入Login.js的其他组件？

例如，在我的Page1.js我import Login from './Login'

可以实现这样的目标吗？我只想将this.state.loggedInUser值传递给我们导入的任何页面。

感谢。

Answer 1

正如上面的评论所述，redux可能是最好的做法。但这是一个用香草反应来完成这个的例子。

export default class Parent extends Component {
  constructor(props) {
    super(props)

    this.state = {
      logginUser: undefined
    }

    this.handleUserState = this.handleUserState.bind(this);
  }

  handleUserState = (userInfo) => {
    this.setState({logginUser: userInfo})
  }

  render = () => {
    return (
      <div>
        <Login handleUserState={this.handleUserState} />

      </div>
    )
  }
}

export default class Login extends Component {

  constructor(props) {
    super(props);

    this.loginUser = this.loginUser.bind(this);
  }

  loginUser = (e) => {
    e.preventDefault()

     <--- make call to api for userInfo here and pass it to the call below --->

    this.props.handleUserState(userInfo)
  }

  render =() => {

    return(
        <div>
          <button type="submit" onClick={this.loginUser} />
        </div>  
    )
  }
}

基本上，由于您将Login导入到另一个组件中，因此您将使用'Parent'组件充当状态管理器并将用户数据保存在该级别。然后，将更新状态的函数传递给Login组件，并在获得用户数据后调用它。

我希望这有帮助！

从导入的组件检查状态

1 个答案: