Question

我正在使用react-router.js。我想使用react.js点击按钮显示/移动到第二个组件/页面

我可以在按钮点击时移动到第二页/组件这是我的代码

http://codepen.io/naveennsit/pen/RamvLj?editors=1010

var { Router, Route} = ReactRouter
class App extends React.Component {

    render() {
        return (<Router>
          <Route path='/' component={first}></Route>
         <Route path='/about' component={second}></Route>
        </Router>)
    }

}

class second extends React.Component {

    render() {
        return <label>second component</label>
    }

}
class first extends React.Component {
handleClick(){
  alert('--')
}
    render() {
        return <div>
          <label>first component</label>
          <button onClick={this.handleClick}>MOve to second page</button>
          </div>
    }

}

React.render( < App / > , document.getElementById('app'))

Answer 1

您可以使用Link

中的react-router

var { Router, Route, Link} = ReactRouter
class App extends React.Component {
  render() {
    return (<Router>
      <Route path='/' component={first} />
      <Route path='/about' component={second} /> 
    </Router>)
  }
}

class second extends React.Component {
  render() {
    return <label>second component</label>
  }
}
class first extends React.Component {
  render() {
    return <div>
      <label>first component</label>
      <Link to='/about'><button>MOve to second page</button></Link>
      {this.props.children}
    </div>
  }  
}
React.render( < App / > , document.getElementById('app'))

希望这有帮助

如何在反应中移动第二个组件？

1 个答案: