Question

我有一个要传递高度的组件作为道具，因此可以在页面级别使用（最小化代码）

<Component style={{height}} />

Component.propTypes = {
   height: PropTypes.string, //make sure it's a string
}

Component.defaultProps = {
   height: "100%", //100% otherwise defined
}

以后可以用作

<Component height="100%"/>
<Component height="50%"/>
<Component height="20%"/>
...

并呈现为

<div class="component-blah-blah" styles="height: 100%;"></div>

我想将overflow-x: hidden添加到聚会中，但作为默认且不可更改的道具。这样，无论他们如何使用样式道具，它都将始终执行我默认的overflow-x。像这样：

<Component height="100%"/>
<div class="component-blah-blah" styles="height: 100%; overflow-x:hidden"></div>

<Component height="50%"/>
<div class="component-blah-blah" styles="height: 50%; overflow-x:hidden"></div>

<Component height="20%"/>
<div class="component-blah-blah" styles="height: 20%; overflow-x:hidden"></div>

我知道我可以使用->`<-和$符号将字符串和props这样的类连接起来，但不能按样式要求使用双括号。

我正在寻找类似这样的语法

className='${classes.myPropClass} myCSSclass'

呈现为class="myPropClass myCSSclass"，但是对于内联样式，不是类...而且我无法将溢出归因于类。出于其他复杂原因

Answer 1

style道具接受一个对象。内括号{}只是用于内联创建对象的语法。因此，只需在render函数中向该对象添加所需的属性即可：

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

Answer 2

您提供的示例代码似乎与您编写的描述不匹配。你说的（重点是我的）：

因此，无论他们如何使用样式道具，它都将始终执行我默认的溢出-x。

但是您在此处输入的代码并未显示有style道具。它只是显示有一个height道具。如果仅给该组件的用户一个height道具来使用，则该值将无法覆盖您的overflowX样式属性。

但是 ...如果您试图允许消费者在道具中传递他们自己的样式对象，然后确保他们不能覆盖如果您希望实现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>标记的内容仍然显示。因为display的硬编码值在传入的显示值之后的样式对象中列出。在CSS中，如果一个属性被声明两次，则最后一个“获胜”。

因此，如果您允许用户将样式对象作为道具传递，但是您想确保他们不会覆盖您正在使用的某些“关键”样式，则可以在这样。

在React中使用style = {{}}连接prop和静态值

2 个答案: