Javascript 如何将道具从父css属性传递到子css属性？

我有一个父组件和子组件在父组件中有一个按钮，单击该按钮，它应该发送一个道具-“红色”，这样子组件应该收到红色，并将其背景颜色更改为红色。下面是我的代码

儿童

import React from "react";
import ReactDOM from "react-dom";

const childContainer = {
  border: "0px solid #000",
  width: "300px",
  height: "300px",
  textAlign: "middle",
  margin: "0 auto",
  marginTop: "60px"
};

const Child = props => {
  return (
    <div
      style={{
        backgroundColor: props.color
      }}
    />
  );
};

export default Child;

从“React”导入React；
从“react dom”导入react dom；
常量childContainer={
边框：“0px固体#000”，
宽度：“300px”，
高度：“300px”，
textAlign：“中间”，
边距：“0自动”，
玛金托普：“60像素”
};
const Child=props=>{
返回(
);
};
导出默认子对象；

家长

import React, { Component } from "react";
import "./App.css";
import Child from "./child";

const parentContainer = {
  border: "10px solid #000",
  width: "500px",
  height: "500px",
  margin: "20px",
  textAlign: "middle"
};

class App extends Component {
  constructor() {
    super();
    this.state = {
      currentColor: "red"
    };
  }
  componentDidMount() {
    this.setState({
      currectColor: "green"
    });
  }
  changeColor = () => {
    this.setState({
      currectColor: "blue"
    });
  };
  render() {
    console.log("in render", this.state);

    return (
      <div style={parentContainer}>
        <button onClick={this.changeColor}>Blue</button>
        <p>{this.state.name}</p>
        <Child color={this.state.currentColor} />
      </div>
    );
  }
}

export default App;

import React，{Component}来自“React”；
导入“/App.css”；
从“/Child”导入子项；
常量parentContainer={
边框：“10px固体#000”，
宽度：“500px”，
高度：“500px”，
页边空白：“20px”，
textAlign：“中间”
};
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
当前颜色：“红色”
};
}
componentDidMount（）{
这是我的国家({
当前颜色：“绿色”
});
}
changeColor=（）=>{
这是我的国家({
当前颜色：“蓝色”
});
};
render（）{
log（“在呈现中”，此.state）；
返回(
蓝色
{this.state.name}

);
}
}
导出默认应用程序；

我已经创建了自己的组件，但您可以应用此逻辑。

类子级扩展React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
报税表（<
h1样式={
{
背景颜色：this.props.color
}
}>你好
)
}
}
类父类扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
颜色：“”
}
}
handleClick=（）=>{
这是我的国家({
颜色：“红色”
})
}
render（）{
报税表（<
div>
<
子颜色={
这是国家的颜色
}
/> <
按钮onClick={
这是手舔
}>更改子颜色
)
}
}
ReactDOM.render（<
父项/>，
document.getElementById（“根”）
);
您需要更改应用程序组件。在changeColor功能中将currentColor保持为蓝色，并将其更改为红色，但您的操作是相反的

试试下面的代码

const parentContainer = {
  border: "10px solid #000",
  width: "500px",
  height: "500px",
  margin: "20px",
  textAlign: "middle"
};

class App extends Component {
  constructor() {
    super();
    this.state = {
      currentColor: "blue"
    };
  }
  componentDidMount() {
    this.setState({
      currentColor: "green"
    });
  }
  changeColor = () => {
    this.setState({
      currentColor: "red"
    });
  };
  render() {
    console.log("in render", this.state);

    return (
      <div style={parentContainer}>
        <button onClick={this.changeColor}>Blue</button>
        <p>{this.state.name}</p>
        <Child color={this.state.currentColor} />
      </div>
    );
  }
}

export default App;

const parentContainer={
边框：“10px固体#000”，
宽度：“500px”，
高度：“500px”，
页边空白：“20px”，
textAlign：“中间”
};
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
当前颜色：“蓝色”
};
}
componentDidMount（）{
这是我的国家({
当前颜色：“绿色”
});
}
changeColor=（）=>{
这是我的国家({
当前颜色：“红色”
});
};
render（）{
log（“在呈现中”，此.state）；
返回(
蓝色
{this.state.name}

);
}
}
导出默认应用程序；
您的父组件中有一些输入错误，如
currectColor
，请先修复这些错误。然后，您可以通过检查
backgroundColor
属性，将其添加到
childContainer
中（如果存在道具）


const parentContainer={
边框：“10px固体#000”，
宽度：“500px”，
高度：“500px”，
页边空白：“20px”，
textAlign：“中间”
};
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
当前颜色：“红色”
};
}
componentDidMount（）{
这是我的国家({
当前颜色：“绿色”
});
}
changeColor=（）=>{
这是我的国家({
当前颜色：“蓝色”
});
};
render（）{
返回(
蓝色
{this.state.name}

);
}
}
const Child=props=>{
让childContainer={
边框：“0px固体#000”，
宽度：“300px”，
高度：“300px”，
textAlign：“中间”，
边距：“0自动”，
玛金托普：“60像素”
};
如果（道具颜色）{
childContainer={…childContainer，backgroundColor:props.color}
}
返回(
);
};
render（，document.getElementById（“根”））
很好的捕获。我没有注意到那个打字错误：）