Question

我想从一个组件导航到另一个组件，例如，在组件1中单击按钮时，我们应该重定向到component2而不必使用this.navigation.navigate（），因为这需要指定一个新URL。我希望URL保持相同，我不想使用react-router。有没有办法做到这一点？

理想情况下，在component1中单击按钮会将component2呈现在占用整个屏幕的component1位置。在某种程度上，component1会导致component2呈现。但我不希望用户直接访问component2。因此，我不希望更改URL。容器还有出路吗？

Answer 1

您需要按照以下条件返回适当的组件：

class Container extends Component {
  render() {
    let cond = this.props.condition
    return (
      { cond ? <Component1/> : <Component2/> }
    )
  }
}

编辑：切换可能是这样的：

class Component1 extends Component {
  render() {
    return (
      <button onClick={this.props.onDone}/>
    )
  }
}


class Container extends Component {
  constructor(props) {
    this.state = { done: false }
  }

  render() {
    let cond = this.state.done
    return (
      { cond ?
        <Component1 onDone={()=>this.setState({done:true})}/> :
        <Component2/>
      }
    )
  }
}

导航到组件而不更改ReactJS中的URL

1 个答案: