Question

我正在使用内联样式来设置HTML DOM元素的样式。我想显示转换后的纯CSS。我正在使用组件状态更改内联样式。

我执行以下操作。它打印样式对象。例如。， {"display":"flex","flexDirection":"column"}

import React, {Component} from 'react';

class Sample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      style: {
          display: "flex", 
          flexDirection: "column"
      },
    }
  }
  render() {
    const {style} = this.state;
    return (
      <div>
        <div style={style}>
          <div id={1}>1</div>
          <div id={2}>2</div>
          <div id={3}>3</div>
          <div id={4}>4</div>
        </div>
        <div>{JSON.stringify(style)}</div>
      </div>
    );
  }
}

export default Sample;

我希望输出为纯CSS而不是内联样式对象。例如"display: flex; flex-direction: column;"

Answer 1

这是一些技巧，但可以满足您的要求。

import React, {Component} from 'react';

class Sample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      style: {
          display: "flex", 
          flexDirection: "column"
      },
    }
  }
  getStyle(){
    let styled = '{';
    Object.keys(this.state.style).forEach(e => {
       let key = e.split(/(?=[A-Z])/).join('-').toLowerCase()
       styled += `${key}:${this.state.style[e]};`
    });
    styled += '}'
    return styled;
  }

  render() {
    const {style} = this.state;
    return (
      <div>
        <div style={style}>
          <div id={1}>1</div>
          <div id={2}>2</div>
          <div id={3}>3</div>
          <div id={4}>4</div>
        </div>
        <div>{this.getStyle()}</div>
      </div>
    );
  }
}

export default Sample;

Demo

Answer 2

最好的方法是将webpack配置为将CSS提取到新文件中。

npm install extract-text-webpack-plugin --save-dev
npm install style-loader css-loader --save-dev

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

Answer 3

我遇到了ReactJS ref文档。我尝试了以下方法。它按我预期的那样工作。 Demo

import React, { Component } from "react";

class Sample extends Component {
  constructor(props) {
    super(props);
    this.itemContainerRef = React.createRef();
    this.state = {
      style: {
        display: "flex",
        flexDirection: "column"
      },
      itemContainerCSS: {}
    };
  }
  componentDidMount() {
    this.setState({
      itemContainerCSS: this.itemContainerRef.current.style.cssText || {}
    });
  }

  render() {
    const { style, itemContainerCSS } = this.state;
    return (
      <div>
        <div style={style} ref={this.itemContainerRef}>
          <div id={1}>1</div>
          <div id={2}>2</div>
          <div id={3}>3</div>
          <div id={4}>4</div>
        </div>
        <div>{JSON.stringify(itemContainerCSS)}</div>
      </div>
    );
  }
}

export default Sample;

如何从ReactJS中的内联样式检索普通CSS？

3 个答案: