Reactjs доступ к состоянию другого компонента

Question

В основном, у меня есть компонент с именем Timeperiod, который представляет собой раскрывающийся список, в котором пользователи выбирают такие значения, как «сегодня», «вчера», «последняя неделя» и т. Д.

Я хочу повторно использовать компонент <Timeperiod> во многих других компонентах, и проблема в том, что я не смогу получить доступ к выбранному значению, если я вызову его в другом.

Я знаю, что альтернативой было бы вызывать мои другие компоненты внутри Timeperiod и передавать им свойства, основанные на состоянии Timeperiod, но не значит ли это, что мне нужно создавать несколько классов, подобных Timeperiod?

Был бы redux или что-то хорошее, чтобы справиться с этими ситуациями?

Вот мои коды и коробка: https://codesandbox.io/s/ypyoq8zoz

Прямо сейчас у меня есть только App.js, вызывающий Timeperiod, но у меня будет еще много классов, вызывающих это тоже. Я хочу иметь возможность доступа к дате, выбранной в App.js, при этом класс Timeperiod можно использовать повторно.

Answer 1

Чтобы решить, нужен ли вам Redux и какой объем Redux вам нужен, вы должны тщательно рассмотреть все приложение, которое вы разрабатываете. Redux добавляет шаблон, который может оказаться слишком большим для тех выгод, которые вы получите.

Однако вы можете решить свою проблему без Redux.

Без Redux

Одна из ключевых идей в React называется «Поднятие состояния вверх». Это означает, что если нескольким компонентам необходим доступ к одному и тому же фрагменту данных, вам обязательно нужно переместить хранилище этого фрагмента данных в компонент, который является общим предком всех этих компонентов (см. https://reactjs.org/docs/lifting-state-up.html). В вашем случае ответственность за сохранение выбранной даты должна лежать не на Timeperiod, а на App (действительно, ближайшем общем предке всех компонентов, которым необходим доступ к выбранному периоду). Период времени должен брать выбранную дату из приложения через свойство и уведомлять приложение, когда пользователь изменяет выбранную дату, используя событие (опять же, реквизит, содержащий функцию).

class App {
  constructor(props) {
    super(props);
    this.state = {
      start: new Date(), // initial value
      end: new Date(),   // initial value
    }
  }
  render() {
    return (
      <Timeperiod 
         start={this.state.start} 
         end={this.state.end}
         onStartChange={newValue => this.setState({ start: newValue })}
         onEndChange={newValue => this.setState({ end: newValue })}
      />
    );
  }
}

С Redux

Redux позволяет вам поддерживать глобальное состояние и получать к нему доступ в специальных компонентах, называемых контейнерами. Вы можете указать, сколько контейнеров вы хотите, в любой точке дерева документа. Это выглядит замечательно, но имеет несколько недостатков:

• Слишком много компонентов контейнера ухудшают производительность
• Полный доступ ко всему состоянию в любой точке дерева может создать проблемы, если вы не будете очень осторожны. Компонент может изменить некоторые данные, к которым ему нельзя разрешить доступ и т. Д.
• Redux представляет некоторый шаблон, который может быть слишком большим, если приложение простое Для любого обновления вы должны определить некоторые действия, способные его обработать, создать редуктор для создания следующего состояния из предыдущего состояния и действия и соединить все эти части

Заключение Это действительно зависит от вашего приложения, является ли Redux хорошим или плохим, но если ваша иерархия компонентов не слишком глубока и ваше приложение не слишком сложное, ванильный путь может быть лучше

Answer 2

Итак, следите за нашими комментариями. Вот как вы могли бы подойти к этому:

Компонент Timeperiod ожидает функцию getDate, которая ожидает аргумент title. При рендеринге компонента Timerperiod каждый раз он имеет отдельное состояние и реквизит.

Посмотрите, как я рендерил более одного (в app.js), чтобы показать это в действии.

Answer 3

Используя redux, вы могли бы иметь в своем состоянии подсостояние timePeriod, обрабатываемое выделенным reducer, в котором хранится выбор пользователя.

Затем каждый из ваших TimePeriod компонентовбудет подключен к этому состоянию, используя что-то вроде

const ConnectedTimePeriod = connect(
  state => state.timePeriod,
  {
    onTimePeriodChoose (timePeriod) {
      return {
        type: "CHOOSE_TIME_PERIOD",
        timePeriod
      }
    }
  }
)(TimePeriod);

, которое гидратирует ваш компонент глобальным общим состоянием и предоставляет функцию в качестве опоры для обновления периода времени.

ConnectedTimePeriodзатем может использоваться везде и будет иметь общее состояние.

Я бы посоветовал вам взглянуть на react-redux документы, например и подробности.