Javascript 如何访问类组件外部的道具

我很难理解如何访问React中类组件外部定义的道具

在下面的代码中，定义了除this.props.checkboxArray之外的所有props，该数组当前返回“无法读取未定义的属性'props'

我知道'this'不是在类组件之外定义的，所以我尝试将'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;

让checkboxObject=this.props.checkboxArray.reduce(
（名称，布尔值）=>({
名称
[布尔]：false
}),
{}
);
类CheckboxList扩展组件{
建造师（道具）{
超级（道具）；
this.state={checkbox:checkboxObject}；
this.checkboxArray=this.checkboxArray.bind（this）；
}
handleCheckboxChange=name=>{
让checkbox=this.state.checkbox；
用于（var输入复选框）{
如果（键===名称）{
复选框[键]=！复选框[键]；
}
}
this.setState（{checkbox}）；
};
render（）{
返回(
{this.props.checkBoxArray.map（复选框=>(
))}
);
}
}
导出默认复选框列表；

您不需要在组件外部创建checkboxObject，您可以做的是在初始化复选框状态时直接在构造函数中减少checkboxArray，就像我在下面更新的代码中所做的那样。然后使用此.state.checkbox[checkbox]访问它

这样，您只需初始化一次复选框状态 这是更新后的代码

    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;

类复选框列表扩展组件{
建造师（道具）{
超级（道具）；
this.state={
复选框：this.props.checkboxArray.reduce(
（名称，布尔值）=>({
名称
[布尔]：false
}),
{}
)；//在这里，您可以直接初始化状态
};
this.checkboxArray=this.checkboxArray.bind（this）；
}
handleCheckboxChange=name=>{
让checkbox=this.state.checkbox；
用于（var输入复选框）{
如果（键===名称）{
复选框[键]=！复选框[键]；
}
}
this.setState（{checkbox}）；
};
render（）{
返回(
{this.props.checkBoxArray.map（复选框=>(
))}
);
}
}
导出默认复选框列表；

您应该创建一个调用checkboxObject的函数，如：

const createcheckbox=checkboxArray=>checkboxArray.reduce(
（名称，布尔值）=>({
名称
[布尔]：false
}),
{}
);

并在类组件上调用此函数：

createCheckBox（this.props.checkboxArray）

---

顺便说一句，这不是最好的做法。您的复选框应该使用

在其父组件上编辑，或者只是将其创建为函数并将道具作为参数传递。我不是很清楚。我在类组件上面有代码，因为我只想让它创建一次原始对象。之后，我希望handleCheckboxChange方法负责切换对象中的布尔值。我同意这不是最佳实践。你们的解决方案奏效了，但我最终在这个州定义了道具，我认为这也是一种糟糕的做法。this.state={checkbox:createCheckBox（this.props.checkboxArray）}；这是因为在我的父组件中，需要将对象中的键名添加到状态为的数组中。但是，我仍然需要原始对象来切换复选框标记。