标签: preact
如何以编程方式使用preact-router导航？
我试图找出如何使用typescript,preact和preact-router构建Web应用程序的前端部分.我已经走了很长的路,但我仍然需要弄清楚如何使用preact-router以编程方式导航(重定向).我可以这样做history.replaceState(null, null, '/#/redirectedUrl');,但是当改变位置栏中的URL时,preact-router不会路由到新的URL.
使用preact-router时以编程方式导航的首选方法是什么？
推荐指数
解决办法
查看次数
无法设置#<Object>的属性createElement,它只是一个getter
描述
什么要报告:我下面这组指令如何设置作出反应热loarder.但是,当我进入第3步,我把补丁放入其中时,它会突破到下面的那个.
预期的行为
您认为应该发生什么:应该正常工作
实际行为
环境
React Hot Loader版本:下一步
在项目文件夹中运行这些命令并填写其结果:
node -v:7.9.0npm -v:4.2.0
然后,指定:
- 操作系统:Windows 10
- 浏览器和版本:最新的Chrome
可重复的演示
https://github.com/abarcenas29/preact-sandbox-v0/blob/wip/hot-reloader/src/main.js
branch:wip-hot-reloader
说明:
yarnyarn run postinstallyarn run start:dev
推荐指数
解决办法
查看次数
为 Preact CLI 设置基本 URL
使用 Preact CLI 是否可以设置应用程序将在根目录之外托管的路径？
推荐指数
解决办法
查看次数
如何使用 Preact 和 TypeScript 对组件子组件进行类型检查？
是否可以使用 TypeScript (v3.0.1) 和 Preact (v8.3.1) 对组件子组件进行类型检查？在 React 中有一个ReactElement<T>可以做到这一点。Preact中有类似的东西吗？
我有一个menu组件，它只能有menuItem子组件。如何在 Preact 中使用 TypeScript 强制执行此操作？使用 React 我可以做类似的事情：
interface Props {
children?: React.ReactElement<MenuItem>[] | React.ReactElement<MenuItem>;
}
我知道这ReactElement是在 中实现的preact-compat，但我不想使用它。
谢谢您的任何建议！
推荐指数
解决办法
查看次数
切换到Preact时,我的React库中的JSX出错
我有一个非常简单的React库,我使用自己的状态管理.它只是一个高阶组件:
import React from 'react';
/**
*
* @param {Object} state - Reference to SubState instance
* @param {Object} chunk - object of props you want maps to from state to props
*/
const connect = (state, chunk)=> Comp => props =>{
const newProps = {};
for (let key in chunk){
newProps[key] = state.getProp(chunk[key]);
}
return (<Comp {...newProps} {...props} />)
};
export {
connect
}
我可以这种方式发布库,我将得到一个关于无法<在JSX中解析的语法错误.
所以我通过babel运行代码
//.babelrc
{
"presets": ["@babel/preset-env","@babel/preset-react"]
}
使用这个webpack配置
const path = require('path');
module.exports …推荐指数
解决办法
查看次数
使用 Preact + Typescript 的类型安全事件处理程序
我正在使用 Preact 编写一个简单的组件，它使用元素onChange的处理程序<input/>：
function Example(props: {}) {
return <input onChange={(e) => {
const { value } = e.currentTarget;
console.log(value);
}} />
}
上面的代码会产生以下错误：
Property 'value' does not exist on type 'EventTarget'.ts(2339)
最快的解决方法是进行类型转换：
const el = (e.currentTarget as HTMLInputElement).value;
但我不想为这样的常见操作添加类型转换到应用程序。
在不使用类型转换或类型的情况下编写表单事件处理程序的正确方法是什么？any
环境信息：
"strict": true在 tsconfig.json 中preact@8.5.2- 没有安装外部类型。使用包默认值。
推荐指数
解决办法
查看次数
Storybook 与 Preact 一起使用时缺少 React 包
我将 Next.js 移至使用 Preact，但作为副作用，Storybook 并没有像预期的那样工作。下面的输出日志以及最后重现问题的命令：
yarn build-storybook
yarn run v1.22.17
warning ../package.json: No license field
$ build-storybook
info @storybook/preact v6.4.19
info
info => Cleaning outputDir: /storybook-static
info => Loading presets
WARN Failed to load preset: "/node_modules/@storybook/preact/node_modules/@storybook/manager-webpack4/dist/cjs/presets/manager-preset.js"
ERR! Error: Cannot find module '/node_modules/react/package.json.js'
ERR! at createEsmNotFoundErr (internal/modules/cjs/loader.js:929:15)
ERR! at finalizeEsmResolution (internal/modules/cjs/loader.js:922:15)
ERR! at resolveExports (internal/modules/cjs/loader.js:450:14)
ERR! at Function.Module._findPath (internal/modules/cjs/loader.js:490:31)
ERR! at Function.Module._resolveFilename (internal/modules/cjs/loader.js:888:27)
ERR! at resolveFileName (/node_modules/resolve-from/index.js:29:39)
ERR! at resolveFrom (/node_modules/resolve-from/index.js:43:9)
ERR! at module.exports (/node_modules/resolve-from/index.js:46:47)
ERR! at Object.<anonymous> (/node_modules/@storybook/ui/paths.js:17:18)
ERR! at …推荐指数
解决办法
查看次数
Deno，Fresh 框架 - html 模板操作
我最近正在玩新的 deno 框架，它非常棒，但在某些时候我意识到不可能向页面头标签添加任何额外的元数据。基本上我想做两件事：
- 添加标题标签
- 从我的静态目录链接一些 css 文件
您知道如何实现这一目标吗？在理想的世界中，我希望能够提供我自己的 html 模板，或者至少有一些灵活的方式来操作提供的固定模板。我确实在 Fresh 源文件中找到了一些代码片段，基本上是前面提到的固定 html 模板，但不幸的是，它对我来说看起来不可自定义 - 只有变量元素是opts.headComponents，但我不确定是否可以影响它。
export interface TemplateOptions {
bodyHtml: string;
headComponents: ComponentChildren[];
imports: (readonly [string, string])[];
styles: string[];
preloads: string[];
lang: string;
}
export function template(opts: TemplateOptions): string {
const page = (
<html lang={opts.lang}>
<head>
<meta charSet="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{opts.preloads.map((src) => <link rel="modulepreload" href={src} />)}
{opts.imports.map(([src, nonce]) => (
<script src={src} nonce={nonce} type="module"></script>
))}
<style
id="__FRSH_STYLE"
dangerouslySetInnerHTML={{ …推荐指数
解决办法
查看次数
（p）做出反应，避免不必要的重新提交
当专注于输入框时，按Enter即可提交表单。提交时，错误会导致将错误插入状态，从而导致重新呈现并创建一个新元素来显示错误。
{error && <div>{error}</div>}
这样就重新渲染了不必要的整个组件。
确定（p）react应该能够检测到仅插入了新的错误元素，而其余DOM可以保持不变吗？
这样的结果是我失去了输入的焦点，而且重新安装了条形iframe。我该如何预防
演示
export default class App extends Component {
state = { val: "Sample input", error: null };
onSubmit = e => {
e.preventDefault();
this.setState({ error: "Some error" });
};
render(props, { val, error }) {
return (
<div>
<h1>Example</h1>
<form onSubmit={this.onSubmit}>
{error && <div>{error}</div>}
<div class="list">
<input
value={val}
onChange={e => this.setState({ val: e.target.value })}
/>
<button type="submit">Submit</button>
</div>
</form>
</div>
);
}
}
?? 更新资料
问题是反应如何调和孩子。
解决方案1通过将key属性添加到条件组件中，我可以避免重新渲染整个组件并保持焦点。
{error …推荐指数
解决办法
查看次数
是否可以混合捆绑模块和 JavaScript 模块
受到preact 的“无构建工具路线”的启发，我最近创建了一个没有构建或捆绑过程的项目。从概念上讲，它看起来像这样（以下是伪代码）。
我依赖于react-button使用 egmicrobundle来解析preact通过node_modules文件夹的导入。
// dependency 1: "preact-button" npm package (uses bundler)
import { h, Component, render } from 'preact';
const button = h('button', null, 'Click');
export default Button;
然后，我的应用程序需要preact-button作为依赖项。它.html现在只是一个文件。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>SO App</title>
<script type="module">
import { h, Component, render } from 'https://unpkg.com/preact?module';
import Button from "https://fantasycdn.com/preact-button?module"
</script>
</head>
<body>
</body>
</html>
但是，我的应用程序没有使用任何打包程序，因此导入了preact-button的代码。如果我有一个打包器，这不会是一个问题，因为这import ... from "preact"将通过打包器解决。但是现在，利用type="module" …
推荐指数
解决办法
查看次数