создать химические формулы с .sub () с реакции

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, , но сделайте это с осторожностью . Возможно, у вас есть такой компонент:

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

Тогда передайте это реагент.