问题标签 [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.

0 投票
1 回答
161 浏览

reactjs - 如何使用 ReactJS/Preact 处理零星的组件卸载错误?

我正在使用 Preact 构建一个 ReactJS SPA 用于学习目的。每隔一段时间,我使用的库中的组件 ( react-frame-component) 在卸载时会抛出异常,这会破坏应用程序的其他部分。这是一个相当零星的错误,因此我无法创建一个重现它的测试用例。

我确实知道错误边界,并且确实尝试将有问题的组件包装<Frame>在一个中,但它并没有产生任何影响。具体来说,我得到的错误信息是

我不确定如何自己去捕获这个错误,甚至只是正确地调试它。任何帮助,将不胜感激。

0 投票
0 回答
17 浏览

javascript - 如何让用户在我的网站上获取他们的信息,而这些信息通常会在另一个使用 Preact 和 JS 的网站上

如果我的问题含糊不清,我很抱歉。

目前我正在尝试使用 Preact 制作一个应用程序。我想要的一项功能是让用户能够在我的应用程序中输入他们的姓名,然后我的应用程序将与不同的网站(我无法控制)进行通信以检索人员信息。另一个网站有一个 .aspx 表单,人们通常会在其中输入自己的姓名。最好用JS。

0 投票
1 回答
39 浏览

javascript - 在渲染之前打印动态变量

我正在尝试编写一个 preact 脚本,该脚本将根据获取的 API 数据显示不同的图像。但是,即使我使用了 componentWillUpdate() 函数,在渲染输出之前似乎也没有调用 fetchWeatherData() 函数。当我在返回数据之前尝试在 render() 函数中打印 this.state.locate 时,输出总是未定义的,但是我需要这个变量来操作我想要显示的图像。谢谢你的帮助。

}

0 投票
2 回答
3918 浏览

preact - Preact CLI CSS 模块

Preact CLI声称它支持CSS Modules开箱即用。所以这就是我尝试过的;给定 2 个文件index.jsindex.module.scss在同一个文件夹中,我尝试了这个:

index.js

index.module.scss

console.log语句打印{},HTML 中的属性class为空。

我究竟做错了什么?

哦,要安装我刚刚做的这些东西

0 投票
2 回答
1297 浏览

javascript - 将状态传递给 preact 组件

我有一个新人要做出反应/预演。我有一个从 API 获取天气预报的简单应用程序,我希望将此数据传递给图表组件(预图表)。我遇到的问题是当这个图表被渲染时,数据还没有被提取并且我得到类型错误,因为我已经在尝试处理它了。我看到另一个问题,其中最佳答案建议在尚未评估父组件的状态时有条件地将 null 而不是组件分配给变量。

在父组件中,我有以下方法设置要传递的状态(它由父组件的构造函数调用):

这是我创建图表的父级渲染方法:

在 Chart 组件中,我尝试this.props.temps直接在render()方法中访问,但最终得到的值为undefined. 我究竟做错了什么?非常感谢帮助。

0 投票
1 回答
81 浏览

forms - 将库从 Preact 移植到 React

我只想问一个问题

我是 Preact 用户,从未尝试过 React,几个月前我才上过一门课程。但是现在我必须将 React 用于一个项目,并且我正在尝试移植我的一个库:https ://github.com/k1r0s/preact-bind-group

该库旨在轻松设置表单

我的代码在 Preact 上完美运行,但我在 React 上遇到问题,例如,每次我在表单上而不是更新字段值时,输入都会失去焦点。

这是 React 示例:https ://codesandbox.io/s/9jv6n8mnrp

这是正在工作的 Preact:https ://codesandbox.io/s/wmpv1o4z8

这个库保持一个内部状态来管理字段值和事件。我做错了什么?帮助表示赞赏

0 投票
1 回答
99 浏览

reactjs - p/react:使用“tag”语法时无法访问状态

我正在自学 p/react,但我不确定为什么我无法访问组件的状态。

我有一个组件:

这会呈现A具有预期状态的组件1,但不会呈现B具有状态的2组件(组件B只是使用空<p>标签呈现)。

但是,如果我使用另一种语法,我可以B使用 state渲染组件2

我在这里在概念上遗漏了一些东西,还是只是有一些我不知道的语法?我试过用谷歌搜索,但我真的不知道足够的术语来获得相关的搜索结果。

0 投票
1 回答
556 浏览

javascript - Overlapping items with Grid Layout does not work in the inline style version with React.js

The div one and two are overlapping but with inline style it does not work.

The inline style version corresponds to style.scss version.

Why does inline style not work?

Codesandbox: https://codesandbox.io/s/qxq5j1n95w

0 投票
2 回答
1890 浏览

reactjs - 如何在 React / Preact(又名。零件)

有时我需要创建一个包装元素,该元素将根据自己的逻辑显示其子元素(或不显示),可以选择将它们包装在自己选择的元素中:

这是有效的,因为孩子(“你好”)是静态的。但是,如果要动态计算子级并且仅在条件成立时才可以明确定义,该怎么办?

在这里,如果条件为假并且包装元素不使用其子元素,它们仍将被创建并向下传递,浪费资源并可能在过程中引发错误。

一种解决方案(可能是最好的?)是将内容包装在自己的组件中:

这是因为(AFAIK,如果我错了,请纠正我)InnerContent 的构造函数和渲染将不会被调用,除非 SomeWrapper 实际决定使用它的属性children

但是如果我不想为 3 行代码创建一个组件怎么办?

我在野外看到了两种选择,没有一种特别吸引人:

  1. 传递一个 thunk 作为唯一的孩子:

    /li>
  2. 传递一个 thunk 作为道具:

    /li>

我不喜欢它们,因为 lambda 给代码添加了视觉噪音,更不用说浪费资源了,在每次render()执行时都会重新创建(AFAIK。)

还有其他我没有看到的解决方案吗?我应该总是使用 InnerContent 元素吗?

0 投票
1 回答
704 浏览

javascript - 没有 Preact Compat 的 Preact 的样式化组件支持?

我用 Electron 制作了一个样板项目,包括 Preact 和 Styled Components,可以在https://github.com/deadcoder0904/wip-desktop找到

它仍然会抛出错误,指出找不到模块:错误:无法解析“反应”

webpack.config.js

src/react.js

而且我认为我做得对,如https://twitter.com/_developit/status/843536715587502080中所述