我有一个组件（LoginScreen）。在那个组件中，我想显示我的登录组件作为用户看到的第一件事。当用户单击注册按钮时，在我的Loginscreen组件中，应该呈现注册组件。从注册组件中，用户可以找到一个按钮“返回登录”，并且当单击时，登录组件应该再次显示组件登录屏幕。我是React的新成员，并试图遵循关于如何在父母/孩子和兄弟姐妹之间共享数据的教程，但我完全困惑。任何帮助将是惊人的！React - 如何在同一时间在父母和孩子之间传递数据？

class Loginscreen extends React.Component{ 
     constructor(props) { 
      super(props) 
      this.state = { 
       status:false 
      } 
       this.changeStatus = this.changeStatus.bind(this); 
     } 
    changeStatus(status) { 
     this.setState({ 
      status: true 
     }); 
     } 

    render() { 
     return (
      <div> 
     <Login status={this.state.status}/> 
     <Signup status={this.state.status}/> 
      <p>No account yet?</p> 
      <button onClick={this.changeStatus}>Sign up</button> 
      // if Signup Component is rendered insight Loginscreen, then this button should also not be rendered. 
      </div> 
     ) 

     } 
    } 

    class Signup extends React.Component { 
     ... 
     //where can I even call this function in my case? 
     handleChange() { 
     const status:true; 
     this.props.onClick(status); 
     } 
     ... 
     <button><Link to='/loginscreen'>Back to Login</Link></button> 
     ... 
    } 

    class Login extends React.Component { 
     ... 

     ... 
    }

2017-08-07 javascripting

我相信这就是终极版http://redux.js.org/将开始发挥作用。它允许所有组件轻松共享应用程序的状态，并在状态发生变化时全部响应。 – Stephen

我知道，我根本不知道redux，因为它涉及到父母/孩子和兄弟姐妹组件，它可能会在这些数据之间传递数据，所以我想尝试一下。 – javascripting

好吧，我相信你正在寻找路由？

溶液1（推荐）：

使用React-Router来处理路由和React-Router/Link组件将处理的切换。

解决方案2：

使用一个简单的状态路由，在父组件保存视图名称和显示基于它的视图，也传递函数来更新这样的观点：

class App extends React.Component{ 
 
\t constructor(props) { 
 
\t \t super(props) 
 
\t \t this.state = { 
 
\t \t \t view: 'login' // its login because we want it to be the default 
 
\t \t } 
 
\t \t this.changeView = this.changeView.bind(this); 
 
\t } 
 
\t changeView(view) { 
 
\t \t this.setState({ 
 
\t \t \t view // ES6, if the key & value variable name the same, just type it once. 
 
\t \t }); 
 
\t } 
 
\t 
 
\t render() { 
 
\t \t const { view } = this.state; // thats es6 destructuring, use it to make the variables clean instead of repeating the this.state/this.props 
 
\t \t return (
 
\t \t \t <div> 
 
\t \t \t \t { 
 
\t \t \t \t \t view == 'login' 
 
\t \t \t \t \t ? (<Login changeView={this.changeView}/>) 
 
\t \t \t \t \t : (<Signup changeView={this.changeView}/>) 
 
\t \t \t \t } 
 
\t \t \t </div> 
 
\t \t) 
 
\t \t 
 
\t } 
 
} 
 

 
class Signup extends React.Component { 
 
\t ... 
 
\t render(){ 
 
\t \t const { changeView } = this.props; 
 
\t \t <div className="Signup"> 
 
\t \t \t {/* Signup Form Here */} 
 
\t \t \t <p>Already registered?</p> 
 
\t \t \t {/* Wrapping the event in arrow function to avoid auto invoke */} 
 
\t \t \t <button onClick={() => changeView('login')}>Login</button> 
 
\t \t </div> 
 
\t } 
 
\t ... 
 
} 
 

 
class Login extends React.Component { 
 
\t ... 
 
\t render(){ 
 
\t \t const { changeView } = this.props; 
 
\t \t <div className="Login"> 
 
\t \t \t {/* Login Form Here */} 
 
\t \t \t <p>No account yet?</p> 
 
\t \t \t <button onClick={() => changeView('signup')}>Sign up</button> 
 
\t \t </div> 
 
\t } 
 
\t ... 
 
}

如果有超过2个视图，您可以将返回包装在正常的If语句中，或者将其移入单独的方法中。

，或者您可以使用动态组件的渲染，像这样：

render() { 
     const { view } = this.state; 

     const ViewComponent = require(`./views/${view}.jsx`); 
     return (<div><ViewComponent.default changeView={this.changeView} /></div>); 

    }

来源

2017-08-07 22:37:44

React - 如何在同一时间在父母和孩子之间传递数据？

回答

溶液1（推荐）：

解决方案2：

相关问题