JS中用于vanilla Javascript类的CSS

如果我创建一个像这样的普通JS组件：

class TestComponent {
  constructor(el) {
    this.render(el);
  }

  render(el) {
    var html = `
      <div>
        <p>Some dummy content</p>
      </div>
    `;
    document.getElementById(el).innerHTML = html;
  }
}

render(el) {
  var html = `
    <div style={styles}>
      <p>Some dummy content</p>
    </div>
  `;
  document.getElementById(el).innerHTML = html;
}

因此，上面的渲染方法将如下所示：

class TestComponent {
  constructor(el) {
    this.render(el);
  }

  render(el) {
    var html = `
      <div>
        <p>Some dummy content</p>
      </div>
    `;
    document.getElementById(el).innerHTML = html;
  }
}

render(el) {
  var html = `
    <div style={styles}>
      <p>Some dummy content</p>
    </div>
  `;
  document.getElementById(el).innerHTML = html;
}

渲染（el）{
变量html=`
一些虚拟内容

`;
document.getElementById（el）.innerHTML=html；
}

---

这可以在Angular/React等框架之外实现吗？

您需要将对象转换为有效的CSS

将不起作用，因为您在此处要求将对象转换为字符串，并且转换不会产生您想要的结果

const styles={
背景颜色：“淡紫罗兰色”，
颜色：“木瓜鞭”，
};
console.log（styles.toString（））您正在将JS对象转换为HTML（字符串）。因此，您必须将对象转换为有效的HTML字符串：

const styles = {
  // CSS key is `background-color` instead of `backgroundColor`
  'background-color': 'palevioletred', 
  color: 'papayawhip',
}


render(el) {
  // Loop every keys, and create an array contain every
  // key:value
  // join every items on array to create a single String.
  var string_styles = Object.keys(styles).map(s => { 
    return s + ":" + styles[s]
  }).join(';')

  // Or
  string_styles = JsToCss(styles)  


  var html = '<div style="' + string_styles + '">' +
      '<p>Some dummy content</p>' +
    '</div>';
  document.getElementById(el).innerHTML = html;
}

// Decomposed function:
let JsToCss = (styles) => {
  let keys = Object.keys(styles) 
  // keys = [ 'background-color', 'color']

  let css_values = keys.map(key => {
    return key + ":" + styles
  })
  // css_values = [
  //     'background-color:palevioletred', 
  //     'color:papayawhip'
  // ]

  return css_values.join(';') 
  // return "background-color:palevioletred;color:papayawhip;" 
}

const styles={
//CSS键是“背景色”而不是“背景色”`
“背景色”：“淡紫色”，
颜色：“木瓜鞭”，
}
渲染（el）{
//循环每个键，并创建包含每个键的数组
//关键词：价值
//将数组中的每个项联接起来以创建单个字符串。
var string_styles=Object.keys（styles）.map（s=>{
返回s+“：“+样式[s]
}).join（“；”）
//或
string_styles=JsToCss（样式）
var html=''+
“一些虚拟内容
”+
'';
document.getElementById（el）.innerHTML=html；
}
//分解函数：
让JsToCss=（样式）=>{
让关键点=对象。关键点（样式）
//按键=['背景色'，'颜色']
让css_values=keys.map（key=>{
返回键+“：”+样式
})
//css_值=[
//“背景色：淡紫色”，
//“颜色：木瓜鞭”
// ]
返回css_值。连接（“；”）
//return“背景色：淡紫色；颜色：木瓜鞭
}

代码未经测试，但这是我的想法
我制作了一个简单的genCSS函数，它将javascript对象中的CSS转换为CSS字符串，并生成应用于样式标记的CSS

const genCSS = (style) => {
  let result = '';
  for (props in style) {
     let keyValuePair = `${props}:${style[props]};`;
     result += keyValuePair;
   }
   return result;
};

const styles = {
  background: '#2196f3',
  color: 'white',
  padding: '5px 10px'
};

class TestComponent {
  constructor(el) {
    this.render(el);
  }

  render(el) {
    const genStyle = genCSS(styles);

    var html = `
      <div style="${genStyle}">
        <p>Some dummy content</p>
      </div>
    `;
    document.getElementById(el).innerHTML = html;
  }
}

const test = new TestComponent('root');

const genCSS=（样式）=>{
让结果=“”；
用于（风格中的道具）{
让keyValuePair=`${props}:${style[props]}；`；
结果+=键值对；
}
返回结果；
};
常量样式={
背景：“#2196f3”，
颜色：'白色'，
填充：“5px 10px”
};
类TestComponent{
建造师（el）{
这个。呈现（el）；
}
渲染（el）{
const genStyle=genCSS（样式）；
变量html=`
一些虚拟内容

`;
document.getElementById（el）.innerHTML=html；
}
}
常量测试=新的测试组件（“根”）；
JavaScript框架或库可以做的任何事情，vanilla JavaScript都可以做，因为所有这些框架和库都是用vanilla JavaScript编写的，或者最终输出vanilla JavaScript。。人们往往会忘记或不知道这一点。为什么不想使用类？@rach8garg，因为我希望它像一个独立的组件，包括它自己的html和css，我认为内联css不是一个好的解决方案，我喜欢js中的css方法（就像我们使用Radium和其他工具时得到的）.要不要解释一下对工作答案的否决票？@H.Pauwelyn我的答案清楚地说明了连字符是一个问题，我的答案也清楚地说明了我的解决方案只是一个例子。@ScottMarcus为什么创建了一个错误的字符串并对其进行了更新，“不是先建立好的关系吗？”亚瑟，我会问你当你对brk发表同样的评论时他问过的同样的问题——你在说什么？我的代码创建的字符串是正确的。经过一些转换后它是正确的，但第一个字符串不在后面：
让cssString=JSON.stringify（styles）
。在stringify之后需要做大量的更新，您可以自己构建一个有效的StringCompressive答案。我认为应该是
style=“${string\u styles}”
而且，您还没有解决从驼峰大小写到连字符语法的转换问题。@KhauriMcClain谢谢，我更新了我的答案。还可以为conversion@Arthur我想你还是得用引号括起来。建议将camel大小写转换为连字符大小写：
s.replace（/（[A-Z]）/g，“-$1”）.toLowerCase（）
@KhauriMcClain，好吧，我没有对concat使用新的ES6语法，所以我用旧的方式重新做了它（确保它工作正常）。这不是回复的想法，所以我不重要（有关es6模板字符串的更多信息：）