如何使用React.js的复选框修改字符串中的文本？

Question

我正在使用MUI复选框组件

import React from 'react';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';

export default function CheckboxLabels() {

  const [state, setState] = React.useState({
    checkedA: false,
  });

  const handleChange = (event) => {
    setState({ ...state, [event.target.name]: event.target.checked });
  };

  return (
    <FormGroup row>
      <FormControlLabel
        control={<Checkbox checked={state.checkedA} onChange={handleChange} name="checkedA" />}
        label="highlight"
      />
    </FormGroup>
  );
}

我需要在字符串中查找id = "passage“的文本

如何获取此dom-node并添加标记

<i className="selected-text">This text is selected</i> ?

Answer 1

没有一种简单的方法可以用<i>标记对文本的某些部分进行换行。我想说你最好的选择是：

const originalText = 'This is a long paragraph but This text is selected in this long paragraph';
const textToHighlight = 'This text is selected';
const otherTextParts = originalText.split(textToHighlight);
console.log(otherTextParts);
// ["This is a long paragraph but ", " in this long paragraph"]

return (
<label>
  {otherTextParts.map((textPart, i) => (< key={textPart + i}>
  <span>{textPart}</span>
  {i < otherTextParts.length - 1 && (<i className="selected-text">{textToHighlight}</i>)}  
</>)}
</label>)