如何使父组件保持固定并切换孩子

Question

我一直在搜索很多东西，但是我没有解决方案。我正在学习反应，所以我很抱歉这是一个基本问题。

我有一个称为search的组件，有3个孩子。一个是SearchCPF(它包含一个输入以通过CPF ID进行搜索(，以及2个应在一次时表现出来的孩子。当用户搜索CPF时，组件searchResult显示数据列表，如果用户单击详细信息链接，则searchResult组件应消失并显示searchDetail组件。问题在于我不知道如何在searchResult和searchDetail组件之间切换固定searchCPF的组件(始终显示此组件(。

我只有在用户在searchCPF组件中进行搜索时才能显示SearchResult组件(我这样做的方式，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>
        )
    }
}

Answer 1

假设在问题中使用了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"one_answers" searchDetail/：id"是"搜索"的子路由，因此将显示"搜索"组件以及" searchResult'"，" searchDeatil"组件。