如何有条件地在文本上附加 b 标签？答案

【问题标题】：How to append b tag on text conditionally?如何有条件地在文本上附加 b 标签？
【发布时间】：2017-06-19 17:04:33
【问题描述】：

我有这个代码用于分页和搜索：

return this.props.todos.filter( (todo) => todo.text.toLowerCase().indexOf(this.state.searchText.toLowerCase()) !== -1 ).slice( (currentPage - 1) * pageSize, currentPage * pageSize ).map((todo,todoIndex) => {
          return <Todo
            key={todo.id}
            {...todo} // pass all the todo property
            onClick={() => onTodoClick(todo.id)}
            onTrashClick={() => onDeleteClick(todo.id, todoIndex)}
            handleSelectedTodo = {this._handleSelectedTodo}
            isChecked={this.state.checkedIds.includes(todo.id)}
          />

在 Todo 组件上，我正在考虑将标记推入匹配 searchText 状态的文本中。像这样：

todo.text.indexOf(this.state.searchText) ? todo.text.split(').push('<b>.....

所以如果部分文本匹配 searchText 状态，我会推送标签，所以当this.state.searchText = 'cde' 和text = 'abcdefg' 时结果会是这样的：

'a<b>cde</b>fg'

帮助？

【问题讨论】：

只需使用组件道具传递所需的数据，并在组件本身中以适当的方式呈现它们
我会传递像isMatched 这样的道具。在 Todo 组件中，您可以执行以下操作：```
{isMatch && {text}} {!isMatch && {text}}
` ``
非常感谢此代码
@Skeevs 我只想将与 searchText 状态匹配的部分文本加粗，而不是整个文本
我只想将匹配 searchText 状态的部分文本加粗。.. 那么问题出在哪里？只需将搜索文本传递给组件并使用string manipulation methods 在那里处理它。

标签： javascript html reactjs

【解决方案1】：

也许是这样的？

const Todo = ({ rSearch, text }) => {
  var strs = text.split(rSearch);
  return (
    <span>
      {strs.map(
        (str, i) =>
          rSearch.test(str) ? <b key={i}>{str}</b> : <span key={i}>{str}</span>
      )}
    </span>
  );
};

class TodoList extends React.Component {
  state = {
    searchText: 'cde'
  };
  render() {
    const { items } = this.props;
    const { searchText } = this.state;
    const rSearch = new RegExp(`(${searchText})`, 'g');
    return (
      <div>
        <input type="text" defaultValue={searchText} />
        <ul>
          {items.map((item, i) =>
            <li key={i}>
              <Todo rSearch={rSearch} text={item.text} />
            </li>
          )}
        </ul>
      </div>
    );
  }
}

const todoItems = [
  {
    text: 'abcdefgh'
  },
  {
    text: 'ijkcdefgh'
  }
];

ReactDOM.render(
  <TodoList items={todoItems} />,
  document.getElementById('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"></div>

【讨论】：