小编Sam*_*uel的帖子

我只是开始使用HOCin React，让我有点困惑的一件事是，在这个例子中我的内部函数如何获得props作为参数的访问权限？

const withProps = Component => (
  props => {
    return <Component {...props}/>
  }
)

export default withProps

尝试loading="lazy"在img标签上使用新属性时，出现以下错误：

[Intervention] An <img> element was lazyloaded with loading=lazy, but had no dimensions specified. Specifying dimensions improves performance. See https://crbug.com/954323

在网上查看时，我遇到了以下链接指定添加width 和height属性img有助于浏览器通过在屏幕上绘制占位符来避免回流：

https://web.dev/native-lazy-loading#image-loading

我的问题是，如今对图像width和height图像进行硬编码非常罕见，如果我在样式表中使用以下内容覆盖这些内容，我是否仍能从避免回流中受益？

img {
   width: 100%;
   height: auto;
}

预先感谢萨米。

我在下面的示例中按预期工作，我的问题是 - 无论如何我可以重写它，以便我不必同时传递泛型T和as道具。理想情况下，我只想传递as道具并让组件的道具界面使用它。

这在 TypeScript 中可能吗？

export type Props<
  T extends keyof JSX.IntrinsicElements
> = JSX.IntrinsicElements[T] & {
  as?: keyof JSX.IntrinsicElements
}

export const MyComponent = <T extends keyof JSX.IntrinsicElements>({
  as: Component = 'div',
}: Props<T>) => {
   // Stuff
   return <Component />
}


// Usage
const Anchor = () => <MyComponent<'a'> href='foo' as='a' id='bar' />

我对webpack / npm还是很陌生，我正设法让我了解如何在其他项目相关性中使用CSS url。

资料夹结构

src
  fonts/
  scss/
    app.scss
  js/
    app.js
  img/
  index.html

webpack.config.js

var path = require('path');
var extractPlugin = require('extract-text-webpack-plugin');
var cleanWebpackPlugin = require('clean-webpack-plugin');
var htmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require("webpack");

module.exports = {
    entry: './src/js/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/app.js'
    },
    devServer: {
        stats: 'errors-only',
        compress: true,
        open: true,
        port: 9000
    },
    module: {

        rules: [

            // ES6 -> ES5 transpiler

            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015'] …

看看这个简单的例子,其中prop toggleData将是一个映射到容器道具的redux thunk动作.

这是将这样的函数传递给子'哑'组件的推荐方法吗？我在网上看到一篇文章说,在处理程序中使用箭头功能是昂贵的,从性能角度来看效率不高.

class Container extends React.Component {
    render(){
        return (
            <Home toggleData={this.props.toggleData}/>
        )
    }
}

const Home = (props) => {
    return (
        <button onClick={()=>{props.toggleData()}}></button>
    )
}

我的目标是从两个 URL 获取数据，并仅在两个 URL 均成功返回时才执行操作。另一方面，如果其中任何一个失败，我想返回错误。我已经尝试了我的代码并设法获得了预期的效果。

我的问题是，是否有更有效、更简洁的方法来实现相同的功能？

辅助函数

let status = (r) => {  
  if (r.ok) {  
    return Promise.resolve(r)  
  } else {  
    return Promise.reject(new Error(r.statusText))  
  }  
}

let json = (r) => r.json();

要求

let urls = [
    'http://localhost:3000/incomplete',
    'http://localhost:3000/complete'
]

let promises = urls.map(url => {

    return fetch(url)  
    .then(status)  
    .then(json)  
    .then(d => Promise.resolve(d))
    .catch(e => Promise.reject(new Error(e)));

});

Promise.all(promises).then(d => {
    // do stuff with d
}).catch(e => {
    console.log('Whoops something went wrong!', e);
});