问题标签 [preact]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - TypeScript 2.8:在一次编译中执行和响应
根据以下站点,我认为我可以在一个编译中同时使用 preact 和 react。但是当我试图在一个编译中一起使用这些库时,就会发生冲突。我认为 preact 和 react 仍然有全局 JSX 命名空间,所以暂时不能混用。如果我的配置有误,请告诉我。
JSX 通过 JSX 工厂解析 目前,当 TypeScript 使用 JSX 时,它会查找全局 JSX 命名空间来查找某些类型(例如,“JSX 组件的类型是什么?”)。在 TypeScript 2.8 中,编译器将尝试根据 JSX 工厂的位置查找 JSX 命名空间。例如,如果您的 JSX 工厂是 React.createElement,TypeScript 将尝试首先解析 React.JSX,然后从当前范围内解析 JSX。
这在混合和匹配不同库(例如 React 和 Preact)或特定库的不同版本(例如 React 14 和 React 16)时会很有帮助,因为将 JSX 命名空间放在全局范围内可能会导致问题。
这是我的测试项目
- 操作系统:Windows 10 64
- 节点:6.9.5
- npm:3.10.10
- tsc:2.8.3
- 网络包:4.6.0
- webpack-cli:2.0.15
目录结构
- 距离
- 源代码
- 成分
- PreactUser.tsx
- 反应用户.tsx
- 索引.tsx
- 成分
- 索引.html
- 包.json
- tsconfig.json
- webpack.config.json
src/components/PreactUser.tsx (第一行: /** @jsx h */)
原来第一行是 /** @jsx h */. 但是此编辑器无法将其识别为正确的代码。
src/components/ReactUser.tsx (第一行: /** @jsx React.createElement */)
src/index.tsx (第一行: /** @jsx h */)
包.json
tsconfig.json
webpack.config.js
索引.html
本来 index.html 的代码比较少,但是这个编辑器不能识别它是正确的代码,所以我总结了代码。
reactjs - 是什么导致我的组件卸载?
我正在制作一个应用程序,其中有一个 Overlay 组件和一个 Map 组件在它后面渲染,就像这样:
显示叠加层是为了让地图在下面加载,但是当我删除叠加层(在此处将 showOverlay 设置为 false)时,Map
组件会重新加载。
起初我以为Map
组件只是重新渲染,但经过一番挖掘后,我发现组件实际上正在重新安装。
如果我登录componentWillMount
,componentWillUnmount
和render
方法,则日志按该顺序显示(这似乎是矛盾的)
父级不会重新安装,只有Map
组件会。
Map 组件只是渲染一个引用 mapbox-gl-js 地图的 div(像这样https://gist.github.com/tristen/5c4b346ae38892f732504e6785d87057#file-map-js)
什么会导致我的组件像这样重新安装自己?
谢谢 !
router - Preact-Router - 处理来自子目录的路由
我目前正在创建一个可以包含并从任何路线运行的 SPA。
目前<Link />
,我创建的任何组件都会将客户端重定向回它所在域的根目录以及预期的路径。
有react-router
一个属性来设置起始基本路径;basename
.
这似乎不存在,preact-router
我真的不想切换到它,react-router
因为它要大得多,而且我不会使用许多附加功能。
一个简单的路由示例:
我在互联网上看到过一些帖子暗示这是可能的,但是文档如此之少,拼凑起来有点棘手。
任何帮助深表感谢。
谢谢。
reactjs - 将基于 React / Preact 的小部件库集成到旧版 Web 应用程序中
客户要求我构建一组可重用的组件/小部件,以集成到遗留 Web 开发(基于 JQuery、ES5)中。
我的想法是创建:
- 一个使用 React / Preact 构建小部件的库。
- 使用 ES6/TS + webpack + babel,最终转译为 ES5 并将其打包到库中。
我主要关心的是第三方库依赖项(例如 react、react-dom 或 preact…),我正在考虑采用以下两种方法之一:
A.将第三方库视为外部依赖项,需要使用我的小部件库的遗留应用程序必须引用该库。
- 优点:我的包没有额外的重量,这个库可以用于旧版应用程序和现代应用程序。
- 缺点:将来可能会出现版本控制地狱,例如我们为 React 16 发布了库,并且在未来,它们混合了来自另一个依赖于 React 18 的库的其他小部件(也许一种可能的解决方法是修复版本并执行全有或全无不时迁移)。
B.将 preact 嵌入到库包中:
- 优点:仅向库包添加 3 到 4 Kb,包是自包含的。
- 缺点:可能我们无法在现代开发中使用这些组件(例如,将其与其他基于反应的库中的其他组件组合在一起)。
什么可能是最好的方法?还有其他选择吗?方法B有意义吗?(以前没试过那个)。
reactjs - 无法在 PReact 项目中导入“ag-grid-react”
我在我的项目中导入 AgGridReact,如下所示
import { AgGridReact } from 'ag-grid-react';
:虽然存在这些库,但 lint 不断向我显示以下错误:JSX element type 'AgGridReact' is not a constructor function for JSX elements.
我的版本是:
“ag-grid”:“^17.1.1”,“ag-grid-react”:“^17.1.0”
reactjs - 在 VS Code 中组织导入删除了我的 preact 导入
对于 JavaScript:
当我运行 VS Code 的命令时,错误地删除Organize Imports
了导入:h
我怎样才能解决这个问题?
javascript - Why accessible-autocomplete with preact ignores displayMenu='overlay' option
I've faced a quite annoying problem with accesible-autocomlete
and can't really find any valid solution for me. What I'm trying to achieve is to show nice autocomplete in overlay just like in any of the examples here: https://alphagov.github.io/accessible-autocomplete/examples/
But my app still prints autocomplete like this:
My imports:
My preact component render()
method returns this:
And autocomplete component call like this
What I've already tried is adding another option element={document.querySelector('#auto-container')}
What I wanted to try, but don't exactly know how to fit it in, is code written just like in the example in documentation:
I've also tried to move it into other simpler component and out of component altogether but to no avail. Is there something I'm missing? Why my
<Autocomplete ... />
is not displaying in overlay mode?
reactjs - 带有 Preact 脚本标签的开发人员工具?
加载带有 < script> 标签的 Preact 时,是否可以将 React 开发人员工具与 Preact 一起使用?
我可以在文档中看到有关通过 webpack 等执行此操作的说明。有没有办法使用脚本标签来执行此操作?
single-page-application - Preact 和 Parcel - 捆绑后的路由问题
一个多月以来,我一直在寻找解决方案。
我已经使用parcel-bundler
and构建了一个个人登录页面preact
。我也preact-router
用来处理我的路由。
这是一些代码。
主要应用组件
导航组件
选项卡.json
因此,每当我使用 parcel 的服务器实时运行页面时,一切都会按预期工作:我单击一个选项卡,然后呈现相应的页面/组件。
但是,每当我运行时parcel build blah blah
,打开我的index.html
并单击任何选项卡,我都会得到以下https://i.imgur.com/71ogrFA.png(单击选项卡时浏览器窗口的屏幕截图),以及浏览器更改为file:///C:/{route_name}
.
我试图理解为什么当我在 parcel 的实时服务器上运行我的页面时它可以工作,以及为什么它在构建后不起作用?看起来,在构建之后,单击任何选项卡会导致浏览器在文件系统中搜索页面?是这种情况吗?最终,我该如何解决这个问题?