Question

我有一个页面，显示给定callId的一组视图（链接看起来像calls/<session_id>）。

此视图也包含一些其他sessionId的链接，因此，如果有人点击该链接，则应为该sessionId加载正确的视图。

    class CallView extends React.Component {
  constructor() {
    super();
    this.state = {
      activeLogTimestamp: null
    };
  }
  render() {
    return (
      <div>
        <Tabs defaultActiveKey={1}>
          <Tab eventKey={1} title='Time Series Data'>
            <CallInfoView callId={this.props.params.callId} callInfo={this.props.params.callInfo}/>
            <SessionsView className='sessionsView' callId={this.props.params.callId} sessions={this.props.params.sessions}/>
            <StatsView callId={this.props.params.callId}/>
          </Tab>
          <Tab eventKey={2} title='Trace Log'>
            <LogView
              callId={this.props.params.callId}
              activeTimestamp={this.state.activeLogTimestamp} />
          </Tab>
          <Tab eventKey={3} title='App Session'>
            <AppSessionView callId={this.props.params.callId} />
          </Tab>
        </Tabs>
      </div>
    );
  }
}
    class SessionList extends React.Component {
  render() {
    const callId = this.props.callId;
    if(this.props.sessions) {
      if(this.props.sessions[callId] && this.props.sessions[callId].length > 0) {
        const sessions = this.props.sessions[callId].map((session, index) => {
          return (
            <SessionItem key={`${session.session_id}`} session={session} />
          );
        });
        return  (<table>{sessions}</table>);
      }
    }

    return (<table/>);
  }
}

导出默认SessionList;

    class SessionItem extends React.Component {
  render() {
    const session = this.props.session;
    const start_date = dateUtils.getFullDateAndTimestamp(new Date(session.start));
    const end_date = dateUtils.getFullDateAndTimestamp(new Date(session.end));
    const link = `/calls/${session.session_id}`;
    const short_session_id = session.session_id.split("-")[0];

    const streams = session.stream.map((st, index) => {
      return (
                <StreamItem key={`${st.stream_id}`} stream={st} />
            );
    });
    return (<tbody><tr>
        <td><b>{session.client_display_name}</b>&nbsp;&nbsp;&nbsp;&nbsp;<Link to={link}>{short_session_id}</Link>&nbsp;&nbsp;&nbsp;&nbsp;</td>
        <td><b>{start_date}</b></td>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>{end_date}</b></td>
    </tr>
    {streams}
    </tbody>);
  }
}

export default SessionItem;

在上面的SessionItem组件中，我使用不同的callId创建了指向同一组视图的链接。

我可以看到，当有人点击SessionsView创建的链接时，它会调用后端，但没有任何内容呈现。

在上面的组件中添加以下方法解决了这个问题，但它加载了整个页面，但是我只想加载几个组件，如何在不重新加载页面的情况下高效地完成这个任务。

    componentWillReceiveProps(nextProps) {
    const callId = nextProps.params.callId;

    if (callId !== this.props.params.callId) {
        window.location.reload()
    }
  }

如何在REACT中重新加载同一组视图

导出默认SessionList;

0 个答案: