Question

假设我有一个名为匹配的组件（呈现span）和一个像Matched text一样的字符串，用该组件包装。

我期待这样的最终结果：

<Match>Matched <Match>text</Match></Match>

在第一次换行时，我的源文本变成了这样的组件：

<Match>Matched text</Match>

有了这个，是否可以将其内部（text部分）与另一个匹配组件包裹起来？这里的方法应该是什么？

感谢。

Answer 1

它应该正常工作。这是你在找什么？

＆＃13;

class Match extends React.Component {
    render() {
        if (this.props.children === 'text') {
            return (
                <span style={{ backgroundColor: 'yellow' }}>{this.props.children}</span>
            )
        } else {
            return (
                <span style={{ color: 'blue' }}>{this.props.children}</span>
            )
        }
    }
}

class Test extends React.Component {
  matchString(string) {
    /* you can work with the raw string here if you want */
    return string.split(' ')
      .map(word => <Match>{word}</Match>);
      
      /* inside the map you can do whatever you want here, maybe conditional wrapping, like if(word === 'text') <Match>word</Match> else word ... */
  }
  render() {
    return (
      <div>
        {this.matchString('Matched text')}
      </div>
    );
  }
}

ReactDOM.render(<Test />, document.getElementById('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>

<body id="root">
</body>

＆＃13;

Answer 2

您需要的是可能的，Match的每个实例都是不同的，而Match标签之间的任何内容都是匹配组件的子项。所以你只需要

＆＃13;

class Match extends React.Component {
    render() {
        return (
            <span>{this.props.children}</span>
        )
    }
}

class App extends React.Component {
  render() {
    return (
        <Match>Matched <Match>text</Match></Match>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

＆＃13;

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

＆＃13;

在React中包装自己的组件？

2 个答案: