Как вызвать метод рендеринга React () из другого компонента?

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.

Допустим, пользователь просматривает другой экран, и на этом экране есть кнопка. Если эта кнопка нажата, Dashboard вызовет метод рендеринга, вместо этого вернув NewDashboard. И NewDashboard будет отображаться автоматически. Это возможно?

Answer 1

Представьте, что у вас есть эта панель:

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>

Также вы можете использовать приставку.

Answer 2

Чаще всего, чтобы изменить вид страницы, вы используете Router. Вы можете настроить маршруты, соответствующие 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>
    );
  }
}

и при нажатии кнопки вы можете использовать ссылку.

Или же вы можете условно визуализировать компонент на основе изменения состояния

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

Answer 3

Возможно что-то вроде:

class NewDashboard extends React.Component {

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

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

  render() {...}
}

Визуализация компонента Force React

Хотя лучше показать / скрыть другие компоненты с помощью условного рендеринга.

Обновление: Это не доступно внутри статического метода. Игнорируйте код.

Answer 4

Вы можете использовать условный рендеринг с использованием состояния. Вы можете отслеживать текущую активную вкладку и использовать это состояние для визуализации нужного компонента.

Answer 5

Программный вызов метода визуализации невозможен.

Вы должны сделать state update этого конкретного компонента, если вы хотите вызвать метод рендеринга этого компонента.

Скажем, если вы хотите вызвать метод рендеринга компонента Dashboard, вы должны вызвать setState для этого компонента. Для этого вы можете сделать несколько фиктивных состояний.