如何将道具从父级传递给子级CSS属性？

Question

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

jsfiddle.net/t1ru6oyz/3/

孩子

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;

父母

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;

Answer 1

您的父组件中有一些错字，例如currectColor，请先解决。然后，可以通过检查将backgroundColor属性添加到childContainer中（如果有）。

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

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      currentColor: "red"
    };
  }
  componentDidMount() {
    this.setState({
      currentColor: "green"
    });
  }
  changeColor = () => {
    this.setState({
      currentColor: "blue"
    });
  };
  
  render() {
    return (
      <div style={parentContainer}>
        <button onClick={this.changeColor}>Blue</button>
        <p>{this.state.name}</p>
        <Child color={this.state.currentColor} />
      </div>
    );
  }
}



const Child = props => {
  let childContainer = {
    border: "0px solid #000",
    width: "300px",
    height: "300px",
    textAlign: "middle",
    margin: "0 auto",
    marginTop: "60px"
  };
  if ( props.color ) {
    childContainer = { ...childContainer, backgroundColor: props.color }
  }
  return (
    <div
      style={childContainer}
    />
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

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

class Child extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return ( <
      h1 style = {
        {
          backgroundColor: this.props.color
        }
      } > hello < /h1>
    )
  }
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      color: ''
    }
  }
  handleClick = () => {
    this.setState({
      color: 'red'
    })

  }

  render() {
    return ( <
      div >
      <
      Child color = {
        this.state.color
      }
      /> <
      button onClick = {
        this.handleClick
      } > change Child color < /button> < /
      div >
    )
  }
}

ReactDOM.render( <
  Parent / > ,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 3

您需要更改App组件。保持currentColor为蓝色，并在changeColor函数中将其更改为红色，但是您要反向进行操作

尝试以下代码

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;