javascript - 如何从另一个组件调用 React 的 render method()？

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 是仪表板 Controller 。我有 2 个仪表板:UserDashboard 和 NewDashboard。

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

Answer 1

Calling render method programmatically not possible.

如果您想调用该组件的渲染方法，您必须对该特定组件进行状态更新。

比如说，如果你想调用Dashboard组件的render方法，你必须在这个组件上调用setState。你可以为此做一些虚拟状态提升。