官网Tree控件 可搜索的树筛选demo 算法bug

[ZhaoJianXXXXX]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://ant.design/components/tree-cn/

Steps to reproduce

在可搜索的树demo中

const title = 'anything';

const searchValue= 'n';

const index = item.title.indexOf(searchValue);

const beforeStr = item.title.substr(0, index);

const afterStr = item.title.substr(index searchValue.length);

const title =
index > -1 ? (

{beforeStr}
<span style={{ color: '#f50' }}>{searchValue}
{afterStr}

) : (
{item.title}
);

对于title的拼接算法有误

What is expected?

当搜索项中有重复的值的时候
每一个所筛选的值都应该标红或其他显著标识
比如说搜索输入栏搜索“啊”
那么加入有一个搜索项“啊/啊/啊”中的每个“啊”都应该有所改变

const name = 'anything';

const searchValue= 'n';

const index = item.title.indexOf(searchValue);

let title = <React.Fragment>{ name }</React.Fragment>;
if(index > -1){
const otherStringArr = name.split(searchValue);
title = <React.Fragment/>;
for(let i = 0; i < otherStringArr.length; i ){
title = (
<React.Fragment>
{ title }
{ otherStringArr[i] }
{ i < otherStringArr.length - 1 ? <span style={{ color: '#f50' }}>{ searchValue } : null }
</React.Fragment>
)
}
}

What is actually happening?

目前只改变了第一个搜索值，使其变为红色，如果title中仍有与searchValue相同的值，并没有处理
比如说搜索输入栏搜索“啊”
那么加入有一个搜索项“啊/啊/啊”中的只有第一个“啊”的颜色有所改变

Environment	Info
antd	3.23.6
React	任意版本
System	win10
Browser	搜狗浏览器 8.6.1.31486

[zombieJ]

Demo 只是举例，实际业务中按照自己的需求改造即可。

[ant-design-bot]

Hello @ZhaoJianXXXXX, we use GitHub issues to trace bugs or discuss plans of Ant Design. So, please don't ask usage questions here. You can try to ask questions on Stack Overflow or Segment Fault, then apply tag antd and react to your question.

你好 @ZhaoJianXXXXX，Ant Design Issue 板块是用于 bug 反馈与需求讨论的地方。请勿询问如何使用的问题，你可以试着在 Stack Overflow 或者 Segment Fault 中提问（记得添加 antd 和 react 标签哦~）。

[afc163]

也可以来个 PR 帮我们改进 : )