标签: preact

以下示例位于Preact主页上.我想知道如何/为什么在类花括号中有等于=赋值和分号.我用谷歌搜索了几分钟,似乎无法搞清楚.;{}

这是TypeScript还是其他一些花哨的JS堂兄？花括号看起来像常规赋值,而不是类定义.

export default class TodoList extends Component {
    state = { todos: [], text: '' };
    setText = e => {
        this.setState({ text: e.target.value });
    };
    addTodo = () => {
        let { todos, text } = this.state;
        todos = todos.concat({ text });
        this.setState({ todos, text: '' });
    };
    render({ }, { todos, text }) {
        return (
            <form onSubmit={this.addTodo} action="javascript:">
                <input value={text} onInput={this.setText} />
                <button type="submit">Add</button>
                <ul>
                    { todos.map( todo => ( …

仅导入样式化组件会在浏览器控制台中导致此错误：

styled-components.browser.esm.js?face:1670 Uncaught TypeError: (0 , _react.createContext) is not a function
    at Object.eval (styled-components.browser.esm.js?face:1670)
    at eval (styled-components.browser.esm.js:2490)
    at Object../node_modules/styled-components/dist/styled-components.browser.esm.js (vendors~index.js:167)
    at __webpack_require__ (index.js:79)
    at eval (index.js?12d5:2)
    at Object../src/index.js (index.js:165)
    at __webpack_require__ (index.js:79)
    at checkDeferredModules (index.js:46)
    at index.js:152
    at index.js:155

我正在使用webpack，preact，Babel。

在新的空构建中，要重现的代码实际上就是这样：

src / index.js：

styled-components.browser.esm.js?face:1670 Uncaught TypeError: (0 , _react.createContext) is not a function
    at Object.eval (styled-components.browser.esm.js?face:1670)
    at eval (styled-components.browser.esm.js:2490)
    at Object../node_modules/styled-components/dist/styled-components.browser.esm.js (vendors~index.js:167)
    at __webpack_require__ (index.js:79)
    at eval (index.js?12d5:2)
    at Object../src/index.js (index.js:165)
    at __webpack_require__ (index.js:79)
    at checkDeferredModules (index.js:46)
    at index.js:152 …

在可编辑的前元素上,只有在按下回车键时才运行onKeyDown脚本,以避免文本中不需要的HTML元素.

render({}, {content}) {
        console.log("render: "+content);
        return <p contenteditable onKeyDown={this.handleKeyDown}>{content}</p>
}

在handleKeyDown函数中,段落内容被更改setState(content: newText)并被调用,以便再次呈现内容.这导致新文本被写入两次.

当我输入"hello world"并在"hello"之后打破它将导致"hello
worldhello
world"

即使handleKeyDown和render函数记录正确的字符串:
"hello
world"

我在这做错了什么？

我想创建一个Preact组件,让人们使用它,即使他们没有构建Preact应用程序.

示例:我想<MyTooltip>在Preact中构建一个组件,将其捆绑(与Preact运行时一起),并让人们将其作为脚本标记加载,纯粹以声明方式使用它,可能如下:

<script src="https://unpkg.com/my-tooltip/my-tooltip-bundled.js">

<my-tooltip content="Tooltip content">Hover here</my-tooltip>

有没有办法捆绑一个组件,使其包含Preact运行时,我的库代码和钩子<my-tooltip>元素？

换句话说,我可以将Preact组件作为自定义元素进行互操作,类似于ReactiveElements吗？

我想销毁根 Preact DOM 节点。我最初渲染我的组件如下：

import { h, render } from 'preact';
import App from "./components/App";

render(<App />, document.querySelector("#app");

我该如何销毁App？我是简单地卸载#appDOM 节点，还是 Preact 提供类似于 React 的方法unmountComponentAtNode()？

我preact-cli使用默认模板启动了一个项目。我安装了node-sass并且sass-loader. 我更改了其中一个.css文件，.scss然后整个过程中断并给出了此错误。

\xe2\x9c\x96 ERROR BabelEsmPlugin: ./routes/profile/style.scss (../node_modules/preact-cli/lib/lib/webpack/proxy-loader.js??ref--6-0!./routes/profile/style.scss)\nModule build failed (from ../node_modules/preact-cli/lib/lib/webpack/proxy-loader.js):\nValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.\n - options has an unknown property 'includePaths'. These properties are valid:\n   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }\n    at validate (./routes/profile/index.js\n @ ./routes/profile/index.js\n @ ./components/app.js\n @ ./index.js\n @ ../node_modules/preact-cli/lib/lib/entry.js\n @ multi ../node_modules/webpack-dev-server/client?http://0.0.0.0:8080 ../node_modules/webpack/hot/dev-server.js ../node_modules/preact-cli/lib/lib/entry webpack-dev-server/client webpack/hot/dev-server\n …

我有一个非常简单的 React 应用程序（实际上还没有做任何事情）。

我已经安装了最新的 preactX （当前为 10.4.1），根据文档，它现在随 preact/compat 一起提供，这是我需要能够使用我所有的反应优点的库。

我当前的设置：

包.json

"scripts": {
    "prod": "webpack --mode=production",
    "watch": "webpack --watch",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/plugin-transform-react-jsx": "^7.9.4",
    "@babel/preset-env": "^7.9.6",
    "@babel/preset-react": "^7.9.4",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "compression-webpack-plugin": "^4.0.0",
    "html-webpack-plugin": "^4.3.0",
    "path": "^0.12.7",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "preact": "^10.4.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }

babel.config.js

module.exports = {
    presets:[
        "@babel/preset-env", //this was here before preact
        "@babel/preset-react" //this was here before …

我是第一次使用 Preact。

我只是用 preact-cli 和这个默认模板创建了一个新项目：https : //github.com/preactjs-templates/default。

在app.js我尝试使用此代码时：

import { Router } from 'preact-router';

import Header from './header';
import Home from '../routes/home';
import Profile from '../routes/profile';

// I added this function
function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

const App = async () => { // I added "async" and the "{" in this line
  await sleep(3000) // I added this line

  return ( // I added this line
    <div id="app">
      <Header /> …

jsx 在 React 中被战术性地使用，并通过更详细地查看代码来帮助开发人员理解 React 组件。现在的问题是，是否可以使用其他方法例如使用简单的函数或使用react库中的preact或inferno等其他库？

通过我所做的搜索，我认为其他库（例如 preact 或 inferno）可以在 React 库中使用。这个结论正确吗？

我遇到了很多人提到useEffect甚至甚至举一些很好的例子的帖子，但是我找不到任何真正的文档。我也grep node_modules/preactdir，并且useEffect在整个代码库中都没有提及。这是一个单独的模块吗？还是我弄错了版本（8.4.2）？请解释并给出完整的工作示例。