如何在 JSX 中操作字符串？答案

【问题标题】：How can I manipulate strings in JSX?如何在 JSX 中操作字符串？
【发布时间】：2017-01-03 16:23:00
【问题描述】：

我在 JSX 文件中有一个字符串，我必须以这种方式操作：

假设我有以下字符串，其值为medical_specialty = "Plastic Surgery"

我需要这样做：

medical_specialty.replace(' ', '-').toLowerCase()

将其转换为plastic-surgery

我在 JSX 文件中有完整的 JavaScript 语法吗？

【问题讨论】：

标签： javascript string reactjs jsx

【解决方案1】：

您可以在 JSX 文件中使用此 sysntax。
例如，使用反应：

  render() {
    let medical_specialty = "Plastic Surgery"

    medical_specialty = medical_specialty.replace(' ', '-').toLowerCase()

    return (
        <div>
            { medical_specialty }
        </div>
    )
  }

正如 Dave Newton 所说，JSX 只不过是一个将 XML 语法添加到 JavaScript 的再处理步骤。

【讨论】：

我已经在 render() 方法中完全尝试过，但我得到了这个错误code Uncaught TypeError: Cannot read property 'replace' of undefined。可能是我引用的对象在解释时尚未绑定...

【解决方案2】：

JSX 只不过是 JavaScript 加上类似 XML 的语法扩展。

我不确定在不使用 JS 的情况下如何编写 JSX，例如，通过 ES6 类、旧式 createClass 方法等。显然它是 JavaScript，任何琐碎的网络搜索都会准确地告诉你JSX 是什么：

JSX 是将 XML 语法添加到 JavaScript 的预处理器步骤。

【讨论】：

【解决方案3】：

JSX 是一种正在被转换为**纯 JavaScript ** 的语法（例如，通过 babel-plugin-transform-react-jsx）。

所以你不能操纵实际的 JSX（就像你对 true XML 所做的那样，它将使用 XMLDOM 之类的东西进行解析），因为 JSX 本身在运行时永远不会被解析为字符串，它实际上是代码。

花括号中的任何内容都被标记为将不转换的部分，因此您可以在其中拥有任何想要的内容，只要它与 JSX 流程的其余部分匹配（所有这些都将结束作为 JS 代码，包括其中的任何编译或运行时错误）。

例如，这个：

    <SomeComponent someAttr="value">
        <SomeSubComponent/>
    </SomeComponent>;

会变成

    React.createElement(
        SomeComponent,
        { someAttr: "value" },
        React.createElement(SomeSubComponent, null)
    );

查看Babel online compiler是否过期！

祝你编码愉快 ;-)

【讨论】：