React - 如何将类和内联样式作为道具传递

【问题标题】：React - How to pass clases and inline styles as props inReact - 如何将类和内联样式作为道具传递
【发布时间】：2018-04-04 22:12:09
【问题描述】：

我以前有这个，效果很好：

<div className="right mr3 relative center" style={{ marginTop: -300, zIndex: 2 }}>

现在我需要将整个类和内联样式作为道具传递，

tooltipClassName={"right mr3 relative center" style={{ marginTop: -300, zIndex: 2 }}}

然后像这样调用那个类<div className={tooltipClassName}>

也许我需要使用字符串插值或传递另一个道具作为样式，但我不知道。

【问题讨论】：

标签： css reactjs styles

【解决方案1】：

类和样式是不同的 HTML 属性，因此字符串插值在这里不会真正起作用。一种选择：

<SomeComponent tooltipClasses={'right mr3 relative center'} tooltipStyles={{ marginTop: -300, zIndex: 2 }} />

// inside of SomeComponent render:
<div className={this.props.tooltipClasses} style={this.props.tooltipStyles}>

或者，您可以使用 z-index 和边距值编写自己的类并将该类添加到数组中

【讨论】：