将道具传递给子元素 - 反应

Question

我试图将“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 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} />;
          })}