时间戳

首页 > 解决方案 > 如何从 ReactJS 的内联样式中检索纯 CSS？

css - 如何从 ReactJS 的内联样式中检索纯 CSS？

问题描述

我正在使用内联样式来设置 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;"

标签： cssreactjs

解决方案

这是一些技巧，但它会满足您的要求。

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;

演示

推荐阅读