<div> 标签上的未知道具`float`答案

【问题标题】：Unknown prop `float` on <div> tag<div> 标签上的未知道具`float`
【发布时间】：2017-10-03 14:39:48
【问题描述】：

我正在创建一个组件，我想通过 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 上设置 向左浮动 的问题，有什么建议吗？

【问题讨论】：

标签： css reactjs

【解决方案1】：

改变

<div {...style}>

到

<div style={style}>

当您真正想要做的只是将它们分配给 style 属性时，您正在使用 JSX Spread 属性将您的 css 属性作为属性应用到 div。

【讨论】：