标签: preact

刚开始使用Flow但似乎无法理解它是什么让我想要添加类型来解析对象,比如道具

即

render({ count }, { displayHelp }) {

抛出一个错误

 16:   render({ count }, { displayHelp }) {
              ^^^^^^^^^ destructuring. Missing annotation

当我添加注释时,它仍然会抱怨

 17:   render({ count: number }, { displayHelp }) {
              ^^^^^^^^^^^^^^^^^ destructuring. Missing annotation

如果有人能指出的话,我显然在这里遗漏了一些非常简单的东西？

我已经在 Preact 的 repo 中阅读了这些框架之间的差异。我想深入了解 React 和 Preact diff 算法之间的区别。

它们都适用于 VirtualDOM。Preact 如何检查元素是否应该被创建、更新、删除？key在框架中是否具有相同的行为？它是否id用于元素等？有没有关于这个主题的文章、讨论？

你好，我想做的是一个简单的条件渲染，我之前在 react 中做过，但我似乎无法在 preact 中做到。

 export const InfoSection = (props: Props) => 
    {
        return (
            <div>
                <table>
                    <tr>
                        <th>#</th>
                        <th>User</th>
                        <th>Info</th>
                        <th>date</th>
                    </tr>
                    {
                        props.infoEntries.map( (l, i) => 
                        {
                            return (
                                <tr>
                                    <td>{i+1}</td>
                                    <td{l.UserId}</td>
                                    <td>{l.Info}</td>
                                    <td>{l.Date}</td>
                                </tr>
                            )
                        })
                    }
                    {
                        if(this.props.showEntryDetails){
                            return(
                        <tr>
                          <td>"Hello"</td>
                        </tr>
                    )
                        }
                    }
                </table>
            </div>
        )
    }

正如你在底部看到的，我只是尝试在 showEntryDetails 上使用 if，但在这里我收到一个错误，说“预期表达”我认为这是一个打字稿错误，但我不知道为什么它不会让我在那里有一个 if。谁能向我解释为什么以及是否有办法做我想做的事？

我尝试在大多数项目中使用 Preact，但现在我需要使用 React 组件。我不希望这要求我切换框架。我可以做些什么来从我的 Preact 代码中渲染 React 组件吗？

Preact Markup 是 8.5kb，是 Preact 大小的一半。有没有办法渲染原始 HTML 而不必解析它？

我能想到的一种方法是渲染一个占位符，然后在componentDidMount或componentDidUpdateusing 中替换占位符innerHTML，但是有没有更简单的方法？

该Preact CLI声称它支持CSS Modules的开箱即用。所以这就是我尝试过的；给定 2 个文件index.js和index.module.scss在同一个文件夹中，我尝试了以下操作：

索引.js

import { h, Component } from 'preact';
import styles from './index.module.scss';

export default class Layout extends Component {

  render() {
    console.log(styles);
    return (
      <div className={styles.container}>
        {this.props.children}
      </div>
    );
  }
}

index.module.scss

.container {
  margin: 50px auto;
  max-width: 960px;
  width: 100%;
}

该console.log语句打印{}时，class在HTML属性为空。

我究竟做错了什么？

哦，安装这个东西我刚刚做了

preact create default my-project
yarn add -D node-sass sass-loader

有时我需要创建一个包装元素，该元素将根据自己的逻辑显示（或不显示）其子元素，并可选择将它们包装在自己选择的元素中：

<SomeWrapper some={condition}>
  Hello
</SomeWrapper>

这是可行的，因为孩子们（“Hello”）是静态的。但是，如果子级要动态计算并且只有在条件成立时才能明确定义，该怎么办？

<SomeWrapper some={condition}>
  <ul>
    {this.may.not.exist.unless.condition.map(item => 
      <li key={item.id}>{item.text}</li>
    )}
  </ul>
</SomeWrapper>

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

一种解决方案（可能是最好的？）是将内容包装在它们自己的组件中：

<SomeWrapper some={condition}>
  <InnerContent/>
</SomeWrapper>

这是有效的，因为（AFAIK，如果我错了请纠正我）InnerContent 的构造函数和渲染不会被调用，除非 SomeWrapper 实际上决定使用它的childrenprop。

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

我在野外看到过两种选择，但没有一个特别有吸引力：

1. 作为唯一的孩子传递一个重击：

   <SomeWrapper some={condition}>{() =>
     <ul>  
       {this.may.not.exist.unless.condition.map(item => 
         <li key={item.id}>{item.text}</li>
       )}
     </ul>
   }</SomeWrapper>
   

   Run Code Online (Sandbox Code Playgroud)

2. 传递一个 thunk 作为 prop：

   <SomeWrapper some={condition} render={() =>
     <ul>  
       {this.may.not.exist.unless.condition.map(item => 
         <li key={item.id}>{item.text}</li>
       )}
     </ul>
   }/>
   

   Run Code Online (Sandbox Code Playgroud)

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

还有其他我没有看到的解决方案吗？我应该始终使用 InnerContent 元素吗？

我正在构建一个 preact PWA（渐进式 Web 应用程序），我不知道是否应该将字体保留在外部以减少应用程序大小，或者将字体保留在本地以改善离线查看？最佳实践是什么？

在我目前正在工作的项目上，我们需要支持多种语言，因此我们最终使用了preact -helmet来为每个App视图注入标题和相应的元标记，但是我无法使其与{{fields}}占位符一起使用，所以我创建了这个示例项目来演示该问题。

如何安装和运行示例项目

• 克隆仓库 git clone git@github.com:acangiani/preact-i18n-issue.git
• 安装依赖项： npm install
• 运行项目 npm run start

第一视角

这可以正常工作，并正确添加标题和标题元标记。

这样做curl http://localhost:3000/，将输出以下html：

...
<title>Foo - Bar</title>
<meta name="title" content="Foo - Bar" data-preact-helmet="true">
...

第二种观点

另一方面，在此视图上，我需要使用一个{{field}}占位符，这样做curl http://localhost:3000/test，将输出以下html：

...
<title>test - Bar</title>
<meta name="title" content="[object Object]" data-preact-helmet="true">
...

我尝试过的事情

1. 使用@withText作为第二视图修饰，但我不能访问该道具。
2. 试图withText用作功能组件包装器，以便获取翻译后的文本，但我无法使其正常工作。
3. 尝试将组件渲染为类似以下的字符串：

render(<Text id="second.title" " fields={{ field: props.slug }}>default text</Text>)

但无论加载在上的i18n定义如何，我都只获得默认文本IntlProvider。

最重要的是，我需要以字符串形式获取翻译后的文本，但我无法做到这一点，请您提供帮助吗？

目前，我需要让 Preact 应用程序在没有任何构建工具的情况下工作，只需使用带有导入语句的 index.html 即可从 CDN 获取 preact。我可以useState毫无问题地从 CDN 导入钩子，甚至可以 console.log() 函数的值useState，但每当我尝试使用它时，我都会收到一条错误消息：

'未捕获的类型错误：u 未定义'

你知道为什么会这样吗？我尝试过useState在功能组件内部和外部使用该功能，但无论哪种方式都不起作用。我在这里错过了什么吗？谁能帮我指出正确的方向？

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Document</title>
    <script type="module">
        import { h, Component, render } from 'https://unpkg.com/preact?module';
        import { useState } from 'https://unpkg.com/preact@latest/hooks/dist/hooks.module.js?module'
        import htm from 'https://unpkg.com/htm?module';

        // Initialize htm with Preact
        const html = htm.bind(h);
      
        const App = (props) => {

            const [testVar, setTestVar] = useState(0);

            var countVariable = 0; …