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

Question

A client request a feature to implement dashboard switching. I'm working on it:

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 is the dashboard controller. I have 2 dashboards: UserDashboard, and NewDashboard.

Let's say an user is viewing another screen, and in that screen there's a button. If that button is clicked, the Dashboard will call it's render method, returning NewDashboard instead. And NewDashboard will be automatically displayed. Is this possible?

Answer 1

Calling render method programmatically not possible.

You have to do state update of that particular component if you want to call render method of that component.

Say,if you want to call render method of Dashboard Component,you must call setState on this component. You can do some dummy state lifting for that.

Answer 2

Imagine you have this dashboard:

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

Without a router:

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>
    )
  }  
}

With a router:

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

Also you can use redux.

Answer 3

Probably something like:

class NewDashboard extends React.Component {

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

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

  render() {...}
}

Force React Component Render

Though, it's better to show/hide other components by conditional rendering.

Update: "This" is not accessible inside a static method. Ignore the code.

Answer 4

You can use conditional rendering using state. You can keep track of currently active tab and use that state to render the desired component.

Answer 5

More often than not, in order to change page views, you would make use of Router. You can configure Routes corresponding to Dashboard

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>
    );
  }
}

and on button click you can use a link.

Or else you can conditionally render component based on state change

// 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>
    );
  }
}