Question

我父母的组件中有以下代码 -

<Button className={'row1 column1'} value={'1'}/>

所以我将两个className发送给子组件。然后在我的孩子组件中

    render() {
        var { value, className, ...other} = this.props;
        return (
          <button className={s[className]}> {value} </button>
        )
      }
}
export default withStyles(s)(Button);

通常我手动设置className={s.something}并且它有效，但事实并非如此。在渲染的HTML中它看起来像 - <button is="null"></button>有什么想法吗？

Answer 1

假设您使用react-with-style，withStyles会向您的styles添加props个对象。

此对象不知道任何className，您只需将这些styles作为内联样式传递给按钮。

e.g：

render() {
  var { value, className, style, ...other} = this.props;
  return (
    <button
      className={ className }
      style={ style }
    >
      { value }
    </button>
  )
}

编辑： withStyle的优点是使用内联样式。我认为您的s对象没有密钥row1 column1，而是row1和column1，因此您需要手动拆分类名。

但话又说回来，为什么你想要className？

中的样式

为child分配两个className

1 个答案: