Question

我正在创建一个组件，我想通过props将样式属性传递给内部div，但是在尝试分配 float：left

时出现此错误

标记上的未知道具float。从元素中删除此道具。

我的组件：

<Badge style={{width:'10em',float:'left'}} 
      color={props.user.color}
      initials={props.user.initials}
      name={props.user.name} />

组件代码：

render() {
    const {color,initials, name, style} = this.props;
    return (
      <div {...style}>
        <div className="badge-wrapper">
          <div style={{'backgroundColor': color}} className="badge">
            {
              initials.toUpperCase()
            }
          </div>
        </div>
        <a href="#">{name}</a>
      </div>
    );
  }

我没有看到在简单的div上设置浮动左的问题，是否有任何建议？

Answer 1

更改

<div {...style}>

到

<div style={style}>

您正在使用JSX Spread属性将您的css属性应用于div作为属性，而您真正想要的就是将它们分配给样式道具。

<div>标签上的未知道具`浮动`

1 个答案: