将color作为prop传递给子元素以改变背景反应

Question

我试图将这个颜色选择器作为一个道具传递给另一个组件来改变背景。

父母

<li className=" grid cursor-pointer py-3 justify-items-center border-box lg:rounded-l-full lg:w-32 w-[96px] hover:text-white hover:bg-sky-400 duration-700  search dropbtn">
<input 
className='bg-inherit rounded-full' 
type="color" 
value={color}
color={color}
onChange={(e) =>{
setColor(e.target.value)
}} />
</li>

我想传递给:

return (
<div className="container">
<div ref={ref} className="resizeable" style={{backgroundColor: `${setColor}`}} >
<div ref={refLeft} className="resizer resizer-l"></div>
<div ref={refTop} className="resizer resizer-t"></div>
<div ref={refRight} className="resizer resizer-r"></div>
<div ref={refBottom} className="resizer resizer-b"></div>
</div>
</div>
);
}

Answer 1

是否使用状态钩子?如果是这样，它应该是color在setColor的地方在样式prop和我不知道你想做什么。如果你只是想改变颜色，试试这个我假设要将prop传递给导航栏那么你的导航栏组件应该看起来像

export default function Navbar(props){
<ul>
<li style={{backgroundColor:`${props.bgcolor}`}}>link</li>
</ul>
}

现在只需在index.js中使用，或者在你想要的地方使用，比如

<Navbar bgcolor='red'/>

也告诉我，如果我误解了问题😊