当专注于输入框时，按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 …根据 Preact 文档，要将 React 应用程序转换为 Preact，您必须为 webpack 设置别名：
{
"resolve": {
"alias": {
"react": "preact-compat",
"react-dom": "preact-compat"
}
}
}
你怎么能做到这一点，create-react-app因为它隐藏了 react-scripts 依赖下的 webpack？
谢谢！
受到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" …
我有一个通用的 React 应用程序，其中服务器端内置于 babel 中，客户端包内置于webpack. 我已阅读preact-compact文档，并建议将其添加到.babelrc构建中babel：
{
"plugins": [
[
"transform-react-jsx",
{
"pragma": "h"
}
],
[
"module-resolver",
{
"root": [
"."
],
"alias": {
"react": "preact-compat",
"react-dom": "preact-compat"
}
}
]
],
"presets": [
"react"
]
}
而对于webpack：
{
"resolve": {
"alias": {
"react": "preact-compat",
"react-dom": "preact-compat"
}
}
}
但是在构建后我得到一个错误 h is not defined
如何迁移到preact通用反应应用程序
我刚刚preact-redux-example起步并运行,现在我正在尝试在我的应用程序中使用Preact Dev Tools.
基于这篇文章,我认为这是一个添加的案例
import 'preact/devtools'
进入入口点(app.js)文件.
但是,这会产生以下错误:
./src/components/app.js
Module not found: Error: Cannot resolve module 'preact/devtools'
我需要安装其他东西,还是我走错了路？
尝试设置 Jest 来测试我的 React 组件（从技术上讲，我正在使用 Preact）但同样的想法......
每当我尝试获取覆盖率报告时，当它遇到任何 jsx 语法时都会出错。
Running coverage on untested files...Failed to collect coverage from /index.js
ERROR: /index.js: Unexpected token (52:2)
50 |
51 | render(
> 52 | <Gallery images={images} />,
| ^
我试过遵循文档和类似的问题，但没有运气！似乎 Jest 没有使用我的 babel 设置。
知道如何摆脱错误吗？
Running coverage on untested files...Failed to collect coverage from /index.js
ERROR: /index.js: Unexpected token (52:2)
50 |
51 | render(
> 52 | <Gallery images={images} />,
| ^
{
"name": "tests",
"version": "1.0.0",
"description": …代码：
...
wrapper.find('input').simulate('input', { target: {value: 's'}})
命令：
jest test
结果
Cannot set property target of [object Event] which has only a getter at Function.assign
node_modules/enzyme-adapter-preact-pure/build/src/MountRenderer.js 中出现错误
var event = new Event(eventName, {
bubbles: args.bubbles,
composed: args.composed,
cancelable: args.cancelable,
});
Object.assign(event, args);
事件是来自 typescript/libs/lib.d.ts 的接口
interface Event {
...
readonly target: EventTarget | null;
...
}
目标是只读的，如何设置自定义目标？
包.json
"@types/jest": "^24.0.19",
"@types/jquery": "^3.3.31",
"enzyme": "^3.10.0",
"enzyme-adapter-preact-pure": "^2.1.0",
"enzyme-to-json": "^3.4.3",
"jest": "^24.9.0",
"preact": "^8.4.2",
"preact-context": "^1.1.4",
"preact-redux": "^2.0.3",
"redux": "^4.0.1", …我正在尝试使用 TypeScript 在 Preact 应用程序中使用 Jest 和酶运行测试。
\n\n我收到 Jest 遇到意外令牌错误：
\n\nFAIL src/app/app.test.tsx\n \xe2\x97\x8f Test suite failed to run\n\n Jest encountered an unexpected token\n\n This usually means that you are trying to import a file which Jest cannot parse, \n e.g. it\'s not plain JavaScript.\n...\n Details:\n\n src/app/app.test.tsx:10\n const wrapper = enzyme_1.mount(<app_1.default optOutUrl="none"/>);\n ^\n\n SyntaxError: Unexpected token <\n\n at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1059:14)\n在看到此存储库中的TypeScript 示例后，我更改了 jsx 选项以在tsconifg.json. 但它对我的项目环境没有帮助：
Cannot find module \'react\' from \'styled.js\'\n\n However, Jest …使用这些别名时出现此错误。你能帮助我吗？谢谢！
Uncaught TypeError: Cannot set property '__h' of null
at hooks.module.js:1
at Array.forEach (<anonymous>)
at x (hooks.module.js:1)
(anonymous) @ hooks.module.js:1
x @ hooks.module.js:1
“预反应”：“^10.5.12”
Webpack别名代码！
resolve: {
alias: {
"react": "preact/compat",
"react-dom": "preact/compat"
}
}
情感风格被添加到故事书的标题中，如下所示
<head>
<style data-emotion>
...
</style>
<style data-emotion>
...
</style>
<style data-emotion>
...
</style>
<style data-emotion>
...
</style>
...
</head>
由于故事书中情感添加到标题的样式，因此引发了 CSP 错误。
Emotion 有一个关于如何向样式添加随机数的文档 - https://emotion.sh/docs/@emotion/cache#nonce-string
但是我们如何将这个随机数添加到故事书添加的主题中呢？
在这种情况下如何添加随机数/避免 CSP 问题？我是否错过了任何故事书文档，找不到任何相关信息。