将两个类名分配给 child

Question

我的 parent 组件中有以下代码 -

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

所以我将两个类名发送到 child 的组件。然后在我的 child 组件中我有

    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 作为内联样式传递给您的按钮。

例如：

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

编辑： withStyle 的优点是使用内联样式。我想你的 s 对象没有键 row1 column1 而是 row1 和 column1，所以你需要手动拆分类名。

不过话又说回来，你为什么要 className 中的样式？

将两个类名分配给 child

Assign two className to child

styles

button

classname

reactjs