React - 如何在父母之间和兄弟姐妹之间同时传递数据？

Question

我有一个组件（LoginScreen）。在该组件中，我想显示我的Login组件作为用户看到的第一件事。当用户单击注册按钮时，在我的Loginscreen组件中，应该呈现注册组件。从注册组件中，用户找到一个“返回登录”按钮，当单击时，应再次登录组件登录组件登录屏幕。我是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 {
      ...

      ...
    }

Answer 1

好的，我相信您正在寻找路由？

解决方案1（推荐）：

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

解决方案2：

使用简单的状态路由，在父组件中保存视图名称并根据它显示视图，同时传递一个函数来更新此视图：

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

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

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

如果有超过2个视图，您可以在普通的If语句中包装返回，或者在单独的方法中移动它。

或者你可以使用动态组件渲染，如下所示：

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

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

    }