Question

我正在重写一个基于ReactJS中的AngularJS的现有应用程序。在App中，用户可以提供CSS样式字符串来设置某些元素的样式。在AngularJS中，这没有问题，我只是设置了＆＃39; style＆＃39;属性到给定的字符串。在ReactJS中我不能再这样做了，因为ReactJS需要一个样式对象。我不想改变应用程序的行为，并要求用户现在提供与ReactJS兼容的样式对象。在ReactJS中是否有任何方法只使用普通的CSS样式字符串来设置元素的样式？

Answer 1

您可以在componentDidMount和componentDidUpdate中使用setAttribute('style', ...)设置样式字符串。

您只需要能够获得React创建的DOM节点的引用。您可以使用refs。

这是一个例子。此组件接受styleString道具，并将其设置为其呈现的<div/>上的样式。

import React from 'react';

class StyledDiv extends React.Component {
  componentDidMount() {
    this.refs.theDiv.setAttribute('style', this.props.styleString);
  }

  componentDidUpdate() {
    this.refs.theDiv.setAttribute('style', this.props.styleString);
  }

  render() {
    return (
      <div ref="theDiv" />
    );
  }
}
StyledDiv.propTypes = {
  styleString: React.PropTypes.string,
};
export default StyledDiv;

Answer 2

制作了一个可以处理这个名为Style It简单易用的模块，认为我们都应该回到简单编写CSS。

只需将样式字符串作为道具传递。

npm install style-it --save

功能语法（JSFIDDLE）

import React from 'react';
import ReactDOM from 'react-dom';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return Style.it(
      this.props.cssText,
      <p className="intro">CSS-in-JS made simple -- just Style It.</p>
    );
  }
}

ReactDOM.render(
  <Intro cssText=".intro { color: red; }"/>,
  document.getElementById('container')
);

JSX语法（JSFIDDLE）

import React from 'react';
import ReactDOM from 'react-dom';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return (
      <Style>
      {this.props.cssText}

      <p className="intro">CSS-in-JS made simple -- just Style It.</p>
    </Style>
  }
}

export default Intro;

ReactDOM.render(
  <Intro cssText=".intro { color: red; }"/>,
  document.getElementById('container')
);

Answer 3

这是我为试剂发现的一个 hack，但我相信它对于原始反应版本 >= 16（自定义 dom 属性被抛出）同样有效。只需使用大写的 STYLE 属性而不是小写的 style，后者被 React 截获。

Answer 4

将样式字符串转换为javascript对象

这是我的解决方案。我有一个像这样生成的json对象

const generatedStyles = {
    "background-image": "url(\"http:/someurl/foo.JPEG\"), 
    "background-size": "auto 30px",
    "background-position": "center center"
}

我需要一个方法来将其转换为带有react-styles对象的camelCased键的新对象。我已经在组件中定义了这一点。

renameKeys(obj) {
    const keyValues = Object.keys(obj).map(key => {
        var camelCased = key.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
        return { [camelCased]: obj[key] };
    });
    return Object.assign({}, ...keyValues);
}

，可以在<a style={this.renameKeys(generatedStyles)}>styled link</a>

之类的渲染器中使用

Answer 5

如果您使用的是styled-components，那么就不用担心其他答案了。使用v4，您可以从字面上直接将字符串传递给CSS道具的任何html标签或样式化组件。

<div css="margin-top: 4px;">
Yes it works just like that :).
</div>

猜猜您甚至不需要导入styled-components。您需要做的就是添加this babel插件。它将带有css prop的任何元素转换为样式化的组件。

了解更多here。

在React中使用内联样式和纯CSS字符串

5 个答案: