Javascript 使用.sub（）和react创建化学公式

在下面的代码片段中，我试图获取键入的每个数字和要订阅的字符串输入（例如在H2O水公式中）

const试剂=（道具）=>{
返回
里根
{props.algent&&props.algent.map（（参数，i）=>

{参数试剂.替换（/（\d+）/g，'$1'.sub（））}
）}

当我输入H2O时，它返回

H<sub>2</sub>O

H2O

您可以使用

危险的LysetinerHTML

实现这一点。也许您有这样一个组件：

function Subscriptify({value}) {
    const innerHTML = { __html: value.replace(/(\d+)/g, '$1'.sub()) }
    return (
        <p dangerouslySetInnerHTML={innerHTML} />
    )
}

函数下标（{value}）{
const innerHTML={{uuuHTML:value.replace（/（\d+）/g，$1.sub（））}
返回(

)
}

---

然后将试剂传递给它。

您可以编写一个标记器，将输入字符串拆分为字母和数字，并将数字部分封装在

元素中

consttokenize=（公式）=>formula
.split（/（\d+/）
.map（（令牌，idx）=>
idx%2
？{token}
：代币
)
常量公式=（{children}）=>(
{tokenize（子项）}
)
常量应用=（）=>(
水是H2O

乙醇是C2H5OH

)
ReactDOM.render（，document.querySelector（'#root'））

是的，

.sub（）

就是这样做的。到底是什么问题？我想在我的浏览器中返回一个真正的SubscribeTPT号码。如果问题是React正在转义内容，我想你必须使用。

function Subscriptify({value}) {
    const innerHTML = { __html: value.replace(/(\d+)/g, '$1'.sub()) }
    return (
        <p dangerouslySetInnerHTML={innerHTML} />
    )
}