将道具传递给无状态组件样式（css）

Question

我想更改子组件的颜色，现在我从父组件传递颜色。

父母

<ChildBox backColor = {this.state.backgroundColor} />

现在我要为孩子传递此backColor，但以下代码不起作用

const ChildBox = ({backColor}) => {
return(
<div style={backgroundColor: {backColor}} >
<h5>{backColor}</h5>
</div>
)
}

Answer 1

JSX中的

style必须是一个object键，并且将camelCase键传递给类似这样的元素

const ChildBox = ({backColor}) => {
    return(
        <div style={{ backgroundColor: backColor }} >
        <h5>{backColor}</h5>
        </div>
    )
}