如何保持父组件固定并切换其子组件？
如何保持父组件固定并切换其子组件？
提问于 2019-05-21 00:52:18
我已经搜索了很久，但我没有得到解决方案。我正在学习react，所以如果这是一个基本的问题，我很抱歉。
我有一个名为search的组件，它有3个子组件。一个是SearchCPF (它包含通过CPF id进行搜索的输入)，还有两个孩子，每次应该显示一次。当用户搜索CPF时，组件searchResult会显示一个数据列表，如果用户单击details链接，searchResult组件应该会消失并显示searchDetail组件。问题是我不知道如何在searchResult和searchDetail组件之间切换，保持searchCPF固定(这个组件总是显示的)。
只有当用户在SearchResult组件中进行搜索时，我才应该显示searchCPF组件(就像我所做的那样，searchResult与searchCPF一起调用)
searchCPF：
export default props => (
<div role='form'>
<Grid cols='12 9 10'>
<input id="cpf" className='w-25 form-control'
placeholder='Type CPF'
onChange={props.setCPF}
value={props.cpf}
/>
</Grid>
<Grid cols='12 3 2'>
<IconButton style='primary' icon='search'
onClick={props.search}>
</IconButton>
</Grid>
</div>
)search.jsx
export default class Search extends Component {
constructor() {
super()
this.state = { cpf: '', list: []}
this.search = this.search.bind(this)
this.setCPF = this.setCPF.bind(this)
}
setCPF(event) {
...
}
search(evento) {
...
}
render() {
return (
<div>
<ContentHeader title='Search' />
<Content>
<Row>
<SearchCPF cpf={this.state.cpf}
search={this.search}
setCPF={this.setCPF}/>
<SearchResult list={this.state.list} cpf={this.state.cpf}/>
</Row>
</Content>
</div>
)
}
}searchResult.jsx
export default props => {
const renderRows = () => {
const list = props.list || []
return list.map(result => (
<tr key={result.id}>
<td>{result.info_dispositivo.appName}</td>
....
<td><Link to={`/SearchDetail/${result.id}`}>Detalhar</Link>
</td>
</tr>
))
}
return (
<div>
<table className='table'>
<thead>
<tr>
<th width="20%">App</th>
...
</tr>
</thead>
<tbody>
{renderRows()}
</tbody>
</table>
</div>
)
}searchDetail.jsx导出默认属性=> {
const renderRows = () => {
const list = props.list || []
var lista = list.filter(function (l) {
return l.id == props.id
})
return lista.map(consulta => (
<div>
<tr key={consulta.id}>
<td><b>App</b></td>
<td>{consulta.app}</td>
</tr>
</div>
))
}
return (
<div>
<table className='table'>
<tbody>
{renderRows()}
</tbody>
</table>
</div>
)
}index.jsx
ReactDOM.render(
(
<Router history={browserHistory}>
<Route path="/" component={App} >
<IndexRoute component={Search} />
<Route path='/search' component={Search} />
<Route path='/searchDetail/:id' component={SearchDetail} />
<Route path='/dashboard' component={Dashboard} />
</Route>
</Router>
), document.getElementById('app'))app.jsx
class App extends Component {
render() {
return (
<div className='wrapper'>
<Header />
<SideBar />
<div className='content-wrapper'>
{this.props.children}
</div>
<Footer />
</div>
)
}
}回答 1
Stack Overflow用户
发布于 2019-05-21 03:20:34
假设问题中使用了react-router v2，则可以使用以下代码
<Route path='/' component={App}>
<IndexRoute component={Search} />
<Route path='search' component={Search}>
<Route
path='searchDetail/:id'
component={SearchDetail}
/>
<Route
path='searchResult'
component={SearchResult}
/>
</Route>
<Route
path='dashboard'
component={Dashboard} />
</Route>由于路径'SearchResult‘和'searchDetail/:id’是'search‘的子路由，因此'Search’组件将与'searchResult‘或'SearchDeatil’组件一起显示。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56225187
复制相关文章
相似问题