Question

如何通过单击按钮将样式道具传递给组件。因此，我有两个组件，一个称为“按钮组件”，另一个称为“答案组件”。我在按钮组件中有三个按钮。如果单击第一个按钮，它将显示带有BG颜色蓝色的Answer组件。如果我单击按钮组件中的第二个按钮。它应该显示带有红色的BG颜色的应答组件，反之亦然。我可以用什么方式实现它。

预先感谢。

Answer 1

您可以通过在button组件中使用回调来传递样式，以向希望更改答案组件样式的父组件发出信号。

我们首先要有一个父组件来存储颜色状态。然后，我们制作一个回调函数给孩子，以使其能够改变我们父母的颜色。州。对于答案组件，我们只需要将父级的颜色状态发送到该组件以用于更改BG颜色即可。

class ChildAnswer extends React.Component {
  constructor(props) {
      super(props);
  }

  render() {
    return (
      <div className={`answer ${this.props.color}`}> Answer component </div>
    );
  }
}

class ChildButtons extends React.Component {
  constructor(props) {
      super(props);
  }

  render() {
    return (
      <div>
        <button onClick={() => { this.props.changeColorCallback('blue'); }}>Change to BLUE</button>
        <button onClick={() => { this.props.changeColorCallback('red'); }}>Change to RED</button>
        <button onClick={() => { this.props.changeColorCallback('green'); }}>Change to GREEN</button>
      </div>
    );
  }
}

class Parent extends React.Component {

  constructor(props) {
      super(props);
      this.state = {
          color: 'red'
      };
  }

  changeColorCallback = (newColor) => {
      this.setState({ color: newColor });
  }

  render() {
    return (
      <div>
        <ChildAnswer color={this.state.color} />
        <ChildButtons changeColorCallback={this.changeColorCallback}/>
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <Parent/>,
  document.getElementById("react")
);

button {
    margin: 0 10px;
}

.answer {
    width: 200px;
    height: 20px;
    margin: 10px;
    color: white;
    text-align: center;
    padding: 5px
}

.red {
    background-color: red;
}

.blue {
    background-color: blue;
}

.green {
    background-color: green;
}

<div id="react"></div>
<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>

React Material UI |将样式道具传递给组件

1 个答案: