连接React中style={{}中的props和静态值

这个 style 道具拿走一个物体。内支架 {} 只是用于创建对象内联的语法。因此,只需在render函数中向该对象添加所需的属性:

const Component = ({height}) => (
    <div class="component-blah-blah" styles={{height, overflowX: 'hidden'}}></div>
);

您给出的示例代码似乎与随附的描述不匹配。你说(强调,我的):

所以不管怎样 如何使用样式道具 ,它将始终执行我默认的overflow-x。

但你放在这里的代码并没有显示 style 道具。它只是显示出 height 道具。如果此组件的用户只被赋予 高度 使用道具,这个值不可能覆盖你的 overflowX 样式属性。

但是 ... 如果你想让消费者进来 道具中的自己风格的物件 ,然后确保它们不会覆盖您实现 溢流 功能,您应该使用扩展运算符有效地将用户的样式与您的样式连接起来,同时防止样式被覆盖。它看起来像这样:

class App extends Component {
  render() {
    const styleFromProps = { display: 'none' };
    return (
      <p
        style={{
          ...styleFromProps,
          display: 'inherit',
        }}
      >
        Is this displayed???
      </p>
    );
  }
}

render(<App />, document.getElementById('root'));

下面是一个实例:

https://stackblitz.com/edit/react-spread-operators-in-styles

注意在这个例子中 styleFromProps 对象具有 display 价值 none . 但是 <p> 标签仍然显示。因为 显示 在样式对象中列出 在传入的显示值之后 . 在CSS中,如果一个属性声明了两次,则最后一个属性“获胜”。

因此,如果允许用户将样式对象作为道具传入,但要确保它们不会覆盖正在使用的某些“关键”样式,则可以这样做。