1

我继承了一些代码并且一直在操作它，但是我遇到了一些让我摸不着头脑的东西。

我不确定我遇到的问题是否与 react.js 或更普遍地与 CSS / javascript 相关...

在这段代码中，我们使用了 react.js withStyles。

我已经设置了一个沙箱来演示。

在文件中的第一件事，我们定义了一些可以应用于页面元素的样式，例如

const styles = theme => ({
  buttonGroup: {
    width: "250px",
    display: "flex",
    flexWrap: "wrap",
  }, ...

然后，当我们定义一个类时，我们可以通过执行 a 来访问这些样式const { classes } = this.props，例如

class MyButtons extends React.Component {
  render() {
    const { classes } = this.props;
    return (
      <div className={classes.buttonGroup}>
        {three_buttons.map(e => (
          <Button className={classes.a_button}>{e}</Button>
        ))}

      </div>
    );
  }
}

这一切都很好并且有效。我尝试的是在同一个文件中定义第二个类，然后我从第一个类中调用它（在组件中创建一个组件）。

但是，const { classes } = this.props似乎无法访问顶部定义的样式，当我尝试className={classes.buttonGroup}在第二类中设置时，出现错误

TypeError: read property 'buttonGroup' of undefined

我很确定我可以通过像往常一样在单独的文件中简单地定义第二个类来克服这个问题，但我想了解为什么这不起作用。

4

1 回答 1

2

您没有将样式作为道具传递给 MyOtherButtons 组件，因此您遇到了这个问题。将课程作为道具传递，事情将按预期工作。它适用于 MyButtons 组件，因为您使用 withStyles 语法传递样式。

检查工作链接https://codesandbox.io/s/m3rl6o2qyj

于 2018-07-29T05:56:00.003 回答