Reactjs 将道具传递给子元素-react

我试图将“backgroundColor”作为道具从一个文件传递到另一个文件。但是，背景色没有改变。请看下面的代码

线路组件：

const Line = (backgroundColor) => {
    return(
        <div className="line-wrap">
            <div className="line" style={{backgroundColor: backgroundColor}}></div>
            <input type="text" placeholder="Start typing.."></input>
          </div>

    )
}

const行=（背景色）=>{
返回(
)
}

其他文件：

    const addLine = () => {
    updateLines((prevArray) => [...prevArray, "New Line"]);
    };

      {lines.map((line, i) => {
            const colors = ["red", "blue", "yellow", "green", "grey"];
            let randomColor = colors[Math.floor(Math.random() * colors.length)];
            console.log(randomColor);
            return <Line key={i} backgroundColor={randomColor} />;
          })}

常量addLine=（）=>{
updateLines（（prevArray）=>[…prevArray，“新行]）；
};
{lines.map（（line，i）=>{
常量颜色=[“红色”、“蓝色”、“黄色”、“绿色”、“灰色”]；
让randomColor=colors[Math.floor（Math.random（）*colors.length）]；
console.log（随机颜色）；
返回；
})}

const-Line=（backgroundColor）=>{

或

const-Line=（{backgroundColor}）=>{

。可能您没有对道具进行结构化。@NeoWang谢谢，第二个选项起作用，颜色也会改变。但是，现有的线条也会改变背景颜色。如何仅随机显示新线条的背景颜色？我想您可以保留一个带有值的数组。如果索引没有对齐，更新数组。确保在每次更新后删除所有未使用的元素；这是使用useEffect可以执行的操作。