Question

假设我想使用react创建一个自定义按钮。我希望让这个组件接受颜色作为其属性，并根据属性的颜色渲染自身。

class MyButton extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { name, color } = this.props;

    return (
      <div className="my-button">
        <button type="button" className="btn">
          {name}
        </button>
      </div>
    );
  }
}

如何将color注入按钮css样式（边框和字体颜色）？

Answer 1

使用类似：

编辑：添加了边框颜色代码

class MyButton extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { name, color } = this.props;

    return (
      <div className="my-button">
        <button type="button" className="btn" 
          style={{
             color,
             borderColor:color
                 }}>
          {name}
        </button>
      </div>
    );
  }
}

如何创建接受颜色作为参数的React组件？

1 个答案: