Question

我已经搜索了很多，但是没有找到解决方案。我正在学习反应，因此，如果这是一个基本问题，我感到抱歉。

我有一个名为search的组件，有3个孩子。一个是SearchCPF（它包含一个输入以按CPF ID进行搜索），并且应一次显示两个孩子。当用户搜索CPF时，组件searchResult将显示数据列表，如果用户单击详细信息链接，则searchResult组件将消失并显示searchDetail组件。问题是我不知道如何在searchResult和searchDetail组件之间切换，以保持searchCPF固定（始终显示此组件）。

仅当用户在SearchResult组件中进行搜索时，我才应显示searchCPF组件（我的做法是将searchResult与searchCPF一起调用）< / p>

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”和“ searchDetail /：id”是“ search”的子路由，因此将同时显示“ Search”组件和“ SearchResult”，“ SearchDeatil”组件。

如何保持父组件固定并切换其子组件？

1 个答案: