Javascript 更改组件的布线
我有树组件:Javascript 更改组件的布线,javascript,reactjs,react-router,Javascript,Reactjs,React Router,我有树组件: class Home extends Component { render() { return ( <div> <h2>Home</h2> </div> ); } } class Task extends Component { render() { return (
class Home extends Component {
render() {
return (
<div>
<h2>Home</h2>
</div>
);
}
}
class Task extends Component {
render() {
return (
<div>
<h2>Task</h2>
</div>
);
}
}
class User extends Component {
render() {
return (
<div>
<h2>User</h2>
// <Link to='/task'>???</Link>
</div>
);
}
}
class Home扩展组件{
render(){
返回(
家
);
}
}
类任务扩展组件{
render(){
返回(
任务
);
}
}
类用户扩展组件{
render(){
返回(
使用者
// ???
);
}
}
我有index.js:
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route exact path='/' component={Home} />
<Route path='/user' component={User} />
</Switch>
</BrowserRouter>,
document.getElementById('root')
);
ReactDOM.render(
,
document.getElementById('root'))
);
有两个组件映射到两个URL,当您单击某个内容(按钮或链接)时,如何使第三个组件分别呈现,以便URL不会更改。也就是说,呈现了另一个组件,地址保持不变。您应该看看这篇文章,我认为它可以帮助您
您应该创建一个绑定到构造函数的函数,并声明一个状态,以确定是否显示第二页(true | | false)
import React,{Component}来自“React”
从“/MyComponent3.jsx”导入MyComponent3
导出默认类MyComponent2扩展组件{
构造函数(){
超级()
this.handleOnClick=this.handleOnClick.bind(this)
this.state={show:false}
}
点击(){
this.setState({show:true})
}
渲染(){
返回(
提交我
{this.state.show&}
)
}
}
如果您还有什么不清楚的地方,请告诉我。
import React, {Component} from 'react'
import MyComponent3 from './MyComponent3.jsx'
export default class MyComponent2 extends Component {
constructor () {
super()
this.handleOnClick = this.handleOnClick.bind(this)
this.state = { show : false}
}
handleOnClick () {
this.setState({show:true})
}
render () {
return (
<div>
<button onClick={this.handleOnClick()}>Submit Me</button>
{ this.state.show && <MyComponent3/> }
</div>
)
}
}