Javascript 如何更改某些组件的JSX表达式分隔符？

如何更改JSX javascript表达式分隔符

目前，JSX使用

{

和

}

作为表达式分隔符，但是我们如何更改某些组件的分隔符呢？例如，我们如何编写像

${1+1}

或

{{1+1}}

这样的表达式，而不是

{1+1}

这样做的主要动机是使用JSX的强大功能，不仅可以创建功能强大的HTML JS类组件，还可以创建CSS JS类组件

例如，我写了以下内容：

功能风格（道具）{
返回
{props.children}
{props.children}
h1{{}
颜色：{props.color}；
{'}'}
;
}
ReactDOM.render(
* {'{'}
背景色：红色；
{'}'}
,
document.getElementById（'root'））
);

这个很好用，很棒。我认为我们可以用这个策略创造出非常有趣的东西，例如，做一些复杂的计算来获得一些强大的风格，即使是css或SCS（例如）也无法提供给我们。如果需要，我们可以使用javascript的全部功能来编写样式

但是，如果JSX有一个新选项，可以使用上面列出的其他分隔符来解析表达式，那么这个示例将更具可读性。例如，我们可以这样编写相同的代码：

function Style(props) {
  return <div>
    <h1>
      ${props.children}
    </h1>
    <style>
      ${props.children}
      h1 {
        color: ${props.color};
      }
    </style>
  </div>;
}

ReactDOM.render(
  <Style
    color="white"
  >
    * {
      background-color: red;
    }
  </Style>,
  document.getElementById('root')
);

功能风格（道具）{
返回
${props.children}
${props.children}
h1{
颜色：${props.color}；
}
;
}
ReactDOM.render(
* {
背景色：红色；
}
,
document.getElementById（'root'））
);

那么，我们如何更改表达式分隔符呢？ 或者，我们如何扩展JSX以使我们的某些特殊组件（如上面的

Style

）具有这种行为

注意

---

这是一个简单的工作示例和建议。它不是在所有情况下都使用，也不是总是在同一个文件中创建html、css和js的建议。这样做的动机是，当需要时，我们可以使用javascript功能来创建我们的样式，也许你和我一样，有时可以通过javascript表达式轻松地获得一些结果，但即使在Sass中，你也不能。因此，我认为在创建样式时使用javascript的方法在某些情况下是非常有效的。

我认为最好能够避开开头的大括号。有些人建议您当前使用的解决方案。就我而言，我会将所有样式保存在一个单独的CSS文件中，并通过使用React更改元素的类来更改元素的样式。如果您没有意识到，这是您试图解决的问题的一个优雅解决方案。

function Style(props) {
  return <div>
    <h1>
      ${props.children}
    </h1>
    <style>
      ${props.children}
      h1 {
        color: ${props.color};
      }
    </style>
  </div>;
}

ReactDOM.render(
  <Style
    color="white"
  >
    * {
      background-color: red;
    }
  </Style>,
  document.getElementById('root')
);