Реагируйте - Как я могу получить доступ к состоянию / массиву, который находится в одном. js файле в другом. js файле? - PullRequest
Новая
       16

Реагируйте - Как я могу получить доступ к состоянию / массиву, который находится в одном. js файле в другом. js файле?

0 голосов
/ 31 января 2020 
export default class Board extends React.Component {
constructor(props) {
    super(props);
    this.state = { board: ['?', '?', '?', '?', '?', '?', '?', '?', '?']};
    this.counter = 0;
    this.limit = 0;
}

Я хочу получить доступ к доске с этими вопросительными знаками (this.state) в другом файле js, например ... 

import Board from './Board';

export default class Interface extends React.Component
{
constructor(props) {
    super(props);
}

resetBoard()
{
    Board.state.setState({ board: ['?', '?', '?', '?', '?', '?', '?', '?', '?']});
}

render()
{
    return(
        <header id="game-reset">
            <h1 onClick={this.resetBoard}>Reset</h1>
        </header>
    );
}
}

Извините за проблемы с форматированием, но по сути я пытаюсь сбросить доску с доски. js вернуться ко всем вопросительным знакам с помощью функции resetBoard () в интерфейсе. js Проблема в том, что мне нужен доступ к плате "this.state" с доски . js. Я знаю строку

Board.state.setState ({board: ['?', '?', '?', '?', '?', '?', '?' , '?', '?']});

не работает, потому что я не до конца понимаю, какой синтаксис необходим для доступа к этому массиву. Как я могу получить доступ к этому первому массиву так, чтобы я мог изменить его на все знаки вопроса? Спасибо!

Ответы [ 2 ]

0 голосов
/ 31 января 2020

Как упомянул Мат в своем предыдущем комментарии, state Компонента принадлежит самому себе. Компонент может передать свое состояние своим потомкам через props.

Чтобы обновить состояние родителя, вы определяете функцию в родительском компоненте и передаете ее также как props дочернему элементу.

Так что в вашем примере это будет что-то вроде:

Board. js

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = { board: ['x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x']};
    this.counter = 0;
    this.limit = 0;

    this.handleResetBoard = this.handleResetBoard.bind(this);
  }


  handleResetBoard() {
    this.setState({
      board: ['y', 'y', 'y', 'y', 'y', 'y', 'y', 'y', 'y']
    });
  }

  render() {
    return (
      <div>
        <h2>Interface</h2>
        <Interface board={this.state.board} resetBoard={this.handleResetBoard} />
      </div>
    )
  }
}

Интерфейс. js

<code>import Board from './Board';

class Interface extends React.Component {
  constructor(props) {
      super(props);
  }

  render(){
    return(
      <header>
        <pre>{JSON.stringify(this.props.board, null, 2)}
Кнопка ); }}

см. Это в действии: JSFiddle

Я также рекомендую вам прочитать больше о том, где сохранять состояние: https://reactjs.org/docs/thinking-in-react.html#step -4-определить, где-ваш-состояние- должны жить-

0 голосов
/ 31 января 2020

Доступ к состоянию другого компонента в React невозможен. И даже если есть способ - это не рекомендуется.

Существует два варианта решения вашей проблемы:

  1. Вы можете сохранить свое состояние в компоненте, который является родительским для обоих ваши компоненты и передать его (вместе с необходимыми функциями) в качестве поддержки другим компонентам.
  2. Вы можете использовать библиотеку управления состоянием, такую ​​как Redux или MobX. Я бы порекомендовал MobX из-за его простоты, но вы должны проверить оба и решить для себя.
...