【React.js】stateに設定したCSSスタイルを使ってhtml文字列を作りたい

Question

stateに設定しているCSSスタイルを使ってhtml文字列を作りたいのですがうまくいきません。

this.state = {
  style: {
    'color': '#000000'
  }
}

'<div style="color: #000000;"></div>'

のようなhtml文字列を作りたいです。

よろしくお願いします。

Answer 1

React 関係ないですね。

this.state = {
  style: {
    color: '#000000',
    size: '1rem',
  }
}

const style = Object.entries(this.state.style).map(prop => `${prop[0]}: ${prop[1]}`).join(';');
const styledDiv = `<div style="${style}"></div>`

console.log(styledDiv); // > <div style="color: #000;size: 1rem"></div>