测试Webpack创建react项目
基于webpack+react+ts实现一个自动匹配搜索框
效果如下：
使用：
- 克隆到本地
git clone https://github.com/xllpiupiu/React-demo1.git到本地； - 安装相应的包
npm install - 本地运行
npm run dev - 浏览器打开：
http://localhost:8080/ - 测试demo:
输入：
- 前端
- 后端
- 工资
- 学历
博客地址：React-demo1（自动匹配搜索框） - 掘金 (juejin.cn)
使用webpack构建一个react项目。 参考地址：
https://www.jb51.net/article/247286.htm https://blog.csdn.net/mChales_Liu/article/details/111318858
上述只是使用webpack构建了简单的react应用，使用的js语法，接下来探索如何用ts编写代码实现对应功能。参考地址：https://zhuanlan.zhihu.com/p/455297005
- 首先安装与ts相关的插件
npm install awesome-typescript-loader source-map-loader
npm install ts-loader -D
npm install typescript -D
npx tsc --init 上述生成tsconfig.json文件的命令使用npx tsc --init,而不是tsc --init因为，安装的typescript不是全局安装。参考https://blog.csdn.net/qq_41499782/article/details/112368529 。
在次tsconfig.json文件中：
解决：修改webpack.common.js中的入口文件，
- 配置
babel支持typescript，在webpack.common.js修改babel配置，options增加@babel/preset-typescript
- 修改
tsconfig.json的jsx项：
"jsx": "react", npm run dev之后报错：
！！！！！忘记安装这个包了，npm install --save-dev @babel/preset-typescript。
react和react-dom这两个包代码中都不存在对应的类型声明，需要单独安装他们对应的类型声明文件: @types/react-dom @types/react。
参考百度的搜索框，输入关键字，展示含有关键字的匹配下拉列表。
- 输入框组件、下拉列表组件;
- 输入字符串，进行匹配展示含有该字符串相关的数据;
- 搜索匹配功能流程图：
handleSearch(searchVal: string) {
console.log('AutoComponent----', searchVal);
console.log('AutoComponent----', data);
//使用过滤器过滤
this.setState({
searchRe: ['dd', '33']
})
console.log('过滤', data.filter((item) => item.indexOf(searchVal) !== -1))
console.log('searchRe----', this.state.searchRe)
if (this.state.searchRe.length !== 0) {
//匹配到搜索结果
console.log('AutoComponent----', this.state.searchRe)//结果如下图所示：
}
}this.state.searchRe结果：
查阅官方文档：state的更新可能是异步的。
- 自定义的组件没有
style属性。可以在外面加div标签，进一步设置style属性。 - react中渲染模板字符串，react 在模板中渲染 html 字符串 - 简书 (jianshu.io)
使用到属性dangerouslySetInnerHTML={{__html: item}}
matchRes.map((item: string) => {
const newItem = item.replace(searchVal, `<span style='color: #9f95f7;'>${searchVal}</span>`);
newRes.push(newItem);
});
<ul className="match-ul">
{
newRes.map((item: string, index: number) =>
<li dangerouslySetInnerHTML={{__html: item}} className="item-li" key={index.toString()}>
</li>
)
}
</ul>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent