Как получить доступ к реквизитам вне компонента класса React

Question

У меня проблемы с пониманием того, как получить доступ к реквизитам, определенным вне компонента класса в React.

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

Я знаю, что «это» не определено за пределамикомпонента класса, поэтому я попытался связать 'this' с checkboxArray, но все еще та же ошибка, что 'props' не определена.

    let checkboxObject = this.props.checkboxArray.reduce(
      (name, boolean) => ({
        ...name,
        [boolean]: false
      }),
      {}
    );

    class CheckboxList extends Component {
      constructor(props) {
        super(props);
        this.state = { checkbox: checkboxObject };

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

      handleCheckboxChange = name => {
        let checkbox = this.state.checkbox;
        for (var key in checkbox) {
          if (key === name) {
            checkbox[key] = !checkbox[key];
          }
        }
        this.setState({ checkbox });
      };

      render() {
        return (
          <div className="row" id="CheckboxList">
            {this.props.checkBoxArray.map(checkbox => (
              <Checkbox
                label={checkbox}
                isSelected={checkboxObject[checkbox]}
                onCheckboxChange={this.props.onCheckboxTick}
                key={checkbox}
              />
            ))}
          </div>
    );
  }
}

export default CheckboxList;

Answer 1

Вы должны создать функцию для вызова checkboxObject, например:

const createCheckboxes =  checkboxArray => checkboxArray.reduce(
      (name, boolean) => ({
        ...name,
        [boolean]: false
      }),
      {}
    );

и вызвать эту функцию для вашего компонента класса: createCheckboxes(this.props.checkboxArray)

Кстати, это не лучшая практика.Ваш флажок должен быть отредактирован на его родительском компоненте, используя Selector

Answer 2

Вам не нужно создавать внешний компонент checkboxObject. Вместо этого вы можете просто уменьшить checkboxArray непосредственно в конструкторе, инициализируя состояние флажка, как я делал в обновленном коде ниже.Затем откройте его, используя this.state.checkbox [checkbox] для isSelected prop

Таким образом, вы инициализируете состояние флажка только один раз. Вот обновленный код

    class CheckboxList extends Component {
  constructor(props) {
    super(props);
    this.state = { 
        checkbox: this.props.checkboxArray.reduce(
  (name, boolean) => ({
    ...name,
    [boolean]: false
  }),
  {}
); //here you can directly initialize the state
    };

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

  handleCheckboxChange = name => {
    let checkbox = this.state.checkbox;
    for (var key in checkbox) {
      if (key === name) {
        checkbox[key] = !checkbox[key];
      }
    }
    this.setState({ checkbox });
  };

  render() {
    return (
      <div className="row" id="CheckboxList">
        {this.props.checkBoxArray.map(checkbox => (
          <Checkbox
            label={checkbox}
            isSelected={this.state.checkbox[checkbox]}
            onCheckboxChange={this.props.onCheckboxTick}
            key={checkbox}
          />
        ))}
      </div>
);
  }
 }

  export default CheckboxList;