Question

当前反应突出显示工具基于句子中的字符串序列工作。 IE突出显示quick中的the quick fox字样。这很好，但如果快速重复多次则不起作用。

我正在建立一个基于杀虫剂的高光工具。这可以通过将句子吐入一个字符数组并在所选单词周围插入和</span来实现

原始

 0: t
 1: h
 2: e
 3: 

 4: q
 5: u
 6: i
 7: c
 8: k
 9: 
10: f
11: o
12: x

在4,8

快速插入高光

 0: t
 1: h
 2: e
 3: 
 4: <span highlight>
 6: q
 7: u
 8: i
 9: c
10: k
11: </span>
12: 
13: f
14: o
15: x

然后将它们连接在一起以形成the quick fox

但是我必须将这些span添加为字符串，否则它们将无法正确连接在一起，这会导致它们失去反应。

有没有人知道我如何组合这个数组，以便它与反应一起工作，onClick方法也可以工作？

Answer 1

使用dangerouslySetInnerHTML。请参阅文档here。

class Demo extends Component { render() { const markup = 'the quick fox'; return <div dangerouslySetInnerHTML={{ __html: markup }} />; } }

Answer 2

String.prototype.split()和Array.prototype.map()可以render word sentence 有条件地合并。

regex pattern \s匹配whitespace characters。

请参阅下面的实际示例

有关更多背景信息，请参阅此CodeSandbox。

＆＃13;

// Style.
const style = {
  display: 'inline-block',
  margin: "10px"
}

// Highlight.
class Highlight extends React.Component {

  // State
  state = {
    sentence: "The quick fox jumps over the lazy dog.",
    target: false
  }

  // Render.
  render = () => (
    <div>
      {this.state.sentence.split(/\s/).map(word => {
        const hightlight = (word === this.state.target)
        const onClick = () => this.setState({target: word})
        return <Word word={word} highlight={hightlight} onClick={onClick}/>
      })}
    </div>
  )
  
}

// Word.
const Word = ({highlight, word, onClick}) => highlight ?
  <span style={style}><i>{word}</i></span> :
  <button onClick={onClick} style={style}>{word}</button>


// Mount.
ReactDOM.render(<Highlight/>, document.querySelector("#root"))

＆＃13;

<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"></div>

＆＃13;

如何将这个HTML元素数组合成一个React组件

2 个答案: