标签: preact

我正在使用Preact(用于所有意图和目的,React)来呈现项目列表,保存在状态数组中.每个项目旁边都有一个删除按钮.我的问题是:当点击按钮时,删除了正确的项目(我多次验证了这一点),但是重新渲染了项目,最后一个项目丢失,删除的项目仍在那里.我的代码(简化):

import { h, Component } from 'preact';
import Package from './package';

export default class Packages extends Component {
  constructor(props) {
    super(props);
    let packages = [
      'a',
      'b',
      'c',
      'd',
      'e'
    ];
    this.setState({packages: packages});
  }

  render () {
    let packages = this.state.packages.map((tracking, i) => {
      return (
        <div className="package" key={i}>
          <button onClick={this.removePackage.bind(this, tracking)}>X</button>
          <Package tracking={tracking} />
        </div>
      );
    });
    return(
      <div>
        <div className="title">Packages</div>
        <div className="packages">{packages}</div>
      </div>
    );
  }

  removePackage(tracking) {
    this.setState({packages: this.state.packages.filter(e => e !== tracking)});
  }
} …

因此，当在基于 Preact（使用 JEST 测试时与 React 没有太大区别）的项目中测试我的一个减速器时，我遇到了这个问题：

运行 jest 测试时出现以下输出 -

? should setup 

    expect(received).toEqual(expected)

    Expected value to equal:
      {"ID": Any<String>, "active": true, "data": Any<Array>}
    Received:
      {"ID": "BysnEuMlm", "active": true, "data": [{"ID": "Hy7wMAz1lm", "code": "dat.fle", "label": "CRES/datum14.cdata", "name": "File", "status": "READY", "value": {"format": "cdata", "name": "datum14.cdata", "path": "CRES"}}, {"ID": "rkB7RMkeX", "code": "prp.kcv", "label": "3 folds", "name": "k-Fold Cross-Validation", "status": "READY", "value": "3"}, {"ID": "ByCmRfygQ", "code": "ats", "label": undefined, "name": " Best First +  Cfs Subset Eval", "status": "READY", "value": …

我正在尝试使用 Yarn 运行preact create命令。运行起来很简单preact create ..... .....或npx preact create ... ..... 它工作正常，并且两个命令都使用 npm。但我正在尝试使用 Yarn 运行命令。我已经尝试过以下命令，但没有任何效果。该错误显示“在路径中找不到 package.json 文件”。

yarn preact create .... ....

yarn dlx preact create .... ....

yarn preact-cli create .... ....

yarn dlx preact-cli create .... ....

那么，我应该怎么做才能使用 Yarn 运行命令呢？一种替代方法可能是使用 npm 运行命令，然后运行yarn install，然后运行 ​​npm uninstall。但真正的方法是什么呢？

我使用Preact作为我的View框架(由于Facebook IP问题,不能使用React).我需要使用React Router进行位置路由,因为它比同一个团队构建的Preact Router具有更大的灵活性.

我设法让React Router接受Preact代替React,但是,我无法让它匹配位置.我不确定这是兼容性问题还是配置问题.我试过只使用一对路线(应用程序和帐户),它仍然无法使用简化的设置.

问:有谁看到我在这里做错了什么？

我得到的错误是: Location "/account/12345/" did not match any routes

main.js

import { h, render } from 'preact';
import { Router, browserHistory } from 'react-router';
import { Provider } from 'react-redux';

import createStore from './createStore';
import createRoutes from './createRoutes';

process.env.DEBUG && console.log('Hello, developer!');

const history = browserHistory;
const store = createStore( history );
const routes = createRoutes( store );

render((
    <Provider store={ store } key="redux-provider">
        <Router history={ history } createElement={ …

componentDidMount()在Safari中返回时，即使从未卸载过组件，React 16触发器也是如此。如何知道何时安装？

class Foo extends React.Component {
  state = {
    loading: false
  }

  componentDidMount() {
    // when going back in safari
    // triggers in react 16, but not in 15.3 or preact
    console.log('mounted');
  }

  componentWillUnmount() {
    // will never trigger
    console.log('will unmount');
  }

  leave() {
    this.setState({
      loading: true
    });
    setTimeout(() => {
      window.location.href = 'https://github.com/';
    }, 2000);
  }

  render() {
    return this.state.loading ? <div>loading...</div> : <button onClick={this.leave.bind(this)}>leave</button>;
  }
}

背景

Safari使用bfcache。如果返回，它将从缓存中获取最后一页。

当使用react 15.3或preact之类的库时，离开页面不会触发componentWillUnmount，返回页面也不会触发componentDidMount。

此行为会导致多个问题-例如，loading …

我在Preact 中使用自定义元素又名 web 组件。问题是 Typescript 抱怨元素没有被定义在- 在这种情况下是一个元素：JSX.IntrinsicElementscheck-box

<div className={styles.option}>
    <check-box checked={this.prefersDarkTheme} ref={this.svgOptions.darkTheme}/>
    <p>Dark theme</p>
</div>

错误信息（省略路径）：

ERROR in MyComponent.tsx
[tsl] ERROR in MyComponent.tsx(50,29)
      TS2339: Property 'check-box' does not exist on type 'JSX.IntrinsicElements'.

我遇到了以下可能的解决方案，但不幸的是无法正常工作：

1. /sf/answers/4021468951/ - 这是一个与问题无关的答案，但它涵盖了我的问题

我尝试将以下内容添加到我的typings.d.ts文件中：

ERROR in MyComponent.tsx
[tsl] ERROR in MyComponent.tsx(50,29)
      TS2339: Property 'check-box' does not exist on type 'JSX.IntrinsicElements'.

我的 IDE 使导入部分变灰，IntrinsicElements这意味着它没有被使用 (?!) 并且无论如何它都不起作用。我仍然收到相同的错误消息。

2. /sf/answers/3879734491/ - 同样为了反应，我试图将它“转换”为 preact，我得到了与 1 相同的结果。

我什至在squoosh项目中找到了一个由 google 维护的文件 …

我正在尝试使用Preact + Vite + Typescript + Redux构建一个简单的 Todo 应用程序。但我面临着 redux 和 typescript 的一些兼容性问题。

这是我收到的错误。

Uncaught TypeError: Cannot read properties of undefined (reading '__H')
    at m (react-redux.064eb876.js:3)
    at d (react-redux.064eb876.js:3)
    at d.Provider [as constructor] (react-redux.064eb876.js:1165)
    at d.L [as render] (index.js:506)
    at $ (index.js:178)
    at m (children.js:147)
    at $ (index.js:195)
    at m (children.js:147)
    at $ (index.js:195)
    at M (render.js:36)

我在 vite.config.ts 中将react＆react-dom别名为preact-compat。

export default defineConfig(
  {
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
  },
  alias:
    [
       {find: 'react', …

我试图找出如何使用typescript,preact和preact-router构建Web应用程序的前端部分.我已经走了很长的路,但我仍然需要弄清楚如何使用preact-router以编程方式导航(重定向).我可以这样做history.replaceState(null, null, '/#/redirectedUrl');,但是当改变位置栏中的URL时,preact-router不会路由到新的URL.

使用preact-router时以编程方式导航的首选方法是什么？

React有这个概念refs.Preact中是否有类似的概念可以在没有的情况下使用preact-compat？

我希望能够在Component没有DOM查找的情况下引用方法中的元素.

谢谢!

我目前正在使用CLI构建Preact PWA。

我的理解是，无论我在哪里使用JSX定义了组件，都需要import { h } from 'preact'在文件顶部。

我删除了该import语句的所有实例，但该应用程序仍然可以运行并构建得很好。

就像我现在有些困惑一样，有人可以让我直觉到这里吗？也许幕后某个地方发生了一些魔术？