如何从另一个组件调用React的render方法（）？

Question

客户端请求一项功能以实现仪表板切换。 我在做这个工作：

Dashboard.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

// components
import UserDashboard from '../components/dashboard/user-dashboard/UserDashboard.js';
import NewUserDashboard from '../components/new-dashboard/user-dashboard/NewUserDashboard.js';

@connect((state) => {
  return {
    identity: state.identity.toJS().profile
  };
})

export default class Dashboard extends Component {

  render() {
    const msisdn = this.props.location.state ? this.props.location.state.msisdn : null;
    return (
      <UserDashboard msisdn={ msisdn }/>
    );
  }
}

Dashboard.js是仪表板控制器。 我有2个仪表板：UserDashboard和NewDashboard。

假设用户正在查看另一个屏幕，并且在该屏幕中有一个按钮。 如果单击该按钮，则仪表板将调用它的render方法，而是返回NewDashboard。 并且NewDashboard将自动显示。 这可能吗？

Answer 1

以编程方式无法调用render方法。

如果要调用该组件的render方法，则必须对该组件进行state update 。

例如，如果要调用Dashboard组件的渲染方法，则必须在此组件上调用setState 。 您可以为此进行一些虚拟状态提升。

Answer 2

想象一下，您拥有以下信息中心：

function DashBoard({index}) {
  return index == 0 ? <UserDashBoard /> : <SecondDashBoard />;
}

没有路由器：

class ParentComponent extends ReactComponent {

  state = {
    dashboardIndex: 0
  }

  changeDashboard() {
    this.setState({
      dashBoardIndex: (state.dashboardIndex + 1) % 2
    })
  }

  render() {
    return (
        <div>
          <button onclick={() => this.changeDashboard()}>Change dashboard</button>
          <Dashboard index={this.state.dashboardIndex} />
        </div>
    )
  }  
}

使用路由器：

<Switch>
  <Route match="/component1" component={UserDashboard} />
  <Route match="/component2" component={SecondDashboard} />
</Switch>

您也可以使用redux。

Answer 3

大概是这样的：

class NewDashboard extends React.Component {

  static triggerRender() {
    this.forceUpdate();
  }

  // or
  static altTriggerRender() {
    this.setState({ state: this.state });
  }

  render() {...}
}

强制反应组件渲染

不过，最好通过条件渲染来显示/隐藏其他组件。

更新：在静态方法内部无法访问“ This”。 忽略代码。

Answer 4

您可以使用状态使用条件渲染。 您可以跟踪当前活动的选项卡，并使用该状态来呈现所需的组件。

Answer 5

通常，为了更改页面视图，您可以使用路由器。 您可以配置与仪表板相对应的路由

import UserDashboard from '../components/dashboard/user-dashboard/UserDashboard.js';
import NewUserDashboard from '../components/new-dashboard/user-dashboard/NewUserDashboard.js';

@connect((state) => {
  return {
    identity: state.identity.toJS().profile
  };
})

export default class Dashboard extends Component {
  render() {
    const msisdn = this.props.location.state ? this.props.location.state.msisdn : null;
    return (
       <BrowserRouter>
           <Route path="/dashboard/user" render={(props) => <UserDashboard msisdn={ msisdn } {...props}/>} />
           <Route path="/dashboard/new" render={(props) => <NewUserDashboard msisdn={ msisdn } {...props}/>} />
       </BrowserRouter>
    );
  }
}

然后单击按钮就可以使用链接。

否则您可以根据状态变化有条件地渲染组件

// components
import UserDashboard from '../components/dashboard/user-dashboard/UserDashboard.js';
import NewUserDashboard from '../components/new-dashboard/user-dashboard/NewUserDashboard.js';

@connect((state) => {
  return {
    identity: state.identity.toJS().profile
  };
})

export default class Dashboard extends Component {
  state = {
      userDashboard: true
  }
  onToggle=(state)=> {
      this.setState(prevState => ({
          userDashboard: !prevState.userDashboard
      }))
  }
  render() {
    const msisdn = this.props.location.state ? this.props.location.state.msisdn : null;
    return <div>{userDashboard? <UserDashboard msisdn={ msisdn }/>
: <NewUserDashboard msisdn={ msisdn }/>}
         <button onClick={this.onToggle}>Toggle</button>
     </div>
    );
  }
}