Question

我想在React中更改单个元素的CSS。不是在课堂上，而只是在一个单独的元素上。我想更改正在显示的字体的颜色。

我意识到这不起作用，但我希望它能像这样工作：

<style='display: {this.props.tag.colour}'> </style>

这是返回我想要更改的类的元素：

var PhotoGalleryButton = React.createClass({
  getInitialState: function() {
    return this.state = {isClicked: false}
  },
  onClick: function (e) {
    this.setState({isClicked: !this.state.isClicked})
    this.props.selectTag(this.props.tag);
  },
  render: function () {
   let className = [this.props.className];
   let buttonElement = [this.props.buttonElement];
    this.state.isClicked && className.push('');
    return React.createElement(
      this.props.buttonElement,
      { className, onClick: this.onClick },
      this.props.tag.name, );
    // I want this.props.tag.colour to apply to the css of this element under 'color'
  }
});

完整代码为here。

正如您所看到的，我正在使用一个开关，它将元素按编号taglevel分开。在交换机上应用自定义CSS无济于事。

Answer 1

由于您只为一个元素设置了样式，因此可以使用style，它在React中表示为对象（而不是字符串）：

var PhotoGalleryButton = React.createClass({
  getInitialState: function() {
    return this.state = {isClicked: false}
  },
  onClick: function (e) {
    this.setState({isClicked: !this.state.isClicked})
    this.props.selectTag(this.props.tag);
  },
  render: function () {
   let className = [this.props.className];
   let buttonElement = [this.props.buttonElement];
   this.state.isClicked && className.push('');
   let elementProps = { className, onClick: this.onClick };    // ***
   if (weWantToUseTheColor) {                                  // ***
       elementProps.style = { color: this.props.tag.colour };  // ***
   }                                                           // ***
   return React.createElement(
      this.props.buttonElement,
      elementProps,                                            // ***
      this.props.tag.name, );
    // I want this.props.tag.colour to apply to the css of this element under 'color'
  }
});

或者如果您更喜欢更直接的内容：

var PhotoGalleryButton = React.createClass({
  getInitialState: function() {
    return this.state = {isClicked: false}
  },
  onClick: function (e) {
    this.setState({isClicked: !this.state.isClicked})
    this.props.selectTag(this.props.tag);
  },
  render: function () {
   let className = [this.props.className];
   let buttonElement = [this.props.buttonElement];
   this.state.isClicked && className.push('');
   return React.createElement(
      this.props.buttonElement,
      {                                                                      // ***
        className,                                                           // ***
        onClick: this.onClick,                                               // ***
        style: weWantToUseTheColor ? { color: this.props.tag.colour } : null // ***
      },                                                                     // ***
      this.props.tag.name, );
    // I want this.props.tag.colour to apply to the css of this element under 'color'
  }
});

将CSS样式应用于单个元素

1 个答案: