Question

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

const Reagents = (props) => {
return <div>
    <h1>Reagentes</h1>
    {props.reagent && props.reagent.map((param, i) =>
        <p key={i}>
            {param.reagent.replace(/(\d+)/g, '$1'.sub())}
        </p>)}
</div>

当我输入H2O时，它会返回

H<sub>2</sub>O

Answer 1

您可以编写一个分词器，将输入字符串分成字母和数字，并将数字部分包装在<sub>元素中。

const tokenize = (formula) => formula
  .split(/(\d+)/)
  .map((token, idx) => 
    idx % 2
      ? <sub key={idx}>{token}</sub>
      : token
    )

const Formula = ({children}) => (
  <code>{tokenize(children)}</code>
)

const App = () => (
  <div>
    <p>Water is <Formula>H2O</Formula></p>
    <p>Ethanol is <Formula>C2H5OH</Formula></p>
  </div>
)

ReactDOM.render(<App />, document.querySelector('#root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id=root />

Answer 2

您可以使用dangerouslySetInnerHTML，but do so with caution完成此操作。也许您有一个像这样的组件：

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

然后将试剂传递给它。

使用.sub（）与react创建化学式

2 个答案: