Question

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

目前JSX使用{和}作为表达式分隔符，但是我们如何更改某些组件的分隔符？例如，我们如何编写${ 1+1 }或{{ 1+1 }}而不是{ 1+ 1}等表达式？

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

例如，我写了这个example in codepen：

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')
);

这很好用，很棒。我认为我们可以用这个策略创建非常有趣的东西，例如，做几个复杂的计算，以达到一些强大的风格，甚至css或scss（例如）都不能给我们。如果我们需要，我们可以使用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')
);

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

注意

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

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

0 个答案: