ReactJS Promise 逻辑

Question

所以我无法弄清楚这段关于使用 js Promise className 回调的 React 组件中的 promise 的逻辑。所以我正在做的是在网格内创建一个网格项，并根据它的内容更改 class 名称 "height2" 或 "width2"。所以你可以看到函数 "get_image_dimensions" 是在找到图像时从 "class_name" 函数调用的，然后将其附加到基于 return 的字符串中。但问题显然是异步的，因此它将保持运行并且在到达 "class_name" 函数中的 return 时。我无法通过回调解决这个问题的原因是因为它是一个反应组件并通过 jsx 调用。如果有人能提供帮助那就太好了。

如果我能澄清任何事情，请告诉我。

您可以在此处查看代码：

import React from 'react';

class GridItem extends React.Component {
    constructor(props) {
        super(props);
    }

    render(){
        return (
            <div className={this.class_name()}>{this.get_value()}</div>
        );
    }

    class_name(){
        let new_class;
        let pin = this.props.pin;
        let promises = [];

        if(pin.type == "text"){
            var length = pin.value.length;
            if(length > 200) new_class += "width2";
            if(length > 500) new_class += "height2";
        }else if(pin.type == "image"){
            var img_promise = this.get_image_dimensions(pin.value).then(function(img){
                let w = img.width,
                    h = img.height;

                if(w>h){
                    new_class += "width2";
                }else if(w<h){
                    new_class += "height2";
                }
            })

            promises.push(img_promise);
        }else if(pin.type == "embed"){
            new_class += "width2 height2"
        }
        return `draggable-section__item draggable-section__item--masonry pin-type-${pin.type}${new_class ? (' '+new_class) : ''}`;
    }

    get_value(){
        let pin = this.props.pin;

        if(pin.type == "text"){
            return <span>{pin.value}</span>;
        }else if(pin.type == "image"){
            return <img src={pin.value}/>;
        }else if(pin.type == "embed"){
            return <iframe src={pin.value}></iframe>;
        }
    }

    get_image_dimensions(url){
        return new Promise(function(resolve, reject){
            var img = new Image()
            img.onload = function(){
                resolve(img)
            }
            img.src = url
        })
    }
}

export default GridItem;

Answer 1

这是因为您将同步代码与异步代码混合在一起。要修复它，您需要 return draggable-section__item draggable-section__item--masonry pin-type-${pin.type}${new_class ? (' '+new_class) : ''}；对于每个 if 语句。 return 可拖动部分 仅在承诺已解决时 。您还应该检查 async/await，这是使用承诺的另一种方式。

class_name(){
    let new_class;
    let pin = this.props.pin;
    let promises = [];

    if(pin.type == "text"){
        var length = pin.value.length;
        if(length > 200) new_class += "width2";
        if(length > 500) new_class += "height2";
        return `draggable-section__item draggable-section__item--masonry pin-type-${pin.type}${new_class ? (' '+new_class) : ''}`;
    }else if(pin.type == "image"){
        this.get_image_dimensions(pin.value).then(function(img){
            let w = img.width,
                h = img.height;

            if(w>h){
                new_class += "width2";
            }else if(w<h){
                new_class += "height2";
            }
            return `draggable-section__item draggable-section__item--masonry pin-type-${pin.type}${new_class ? (' '+new_class) : ''}`;

        })

    }else if(pin.type == "embed"){
        new_class += "width2 height2"
        return `draggable-section__item draggable-section__item--masonry pin-type-${pin.type}${new_class ? (' '+new_class) : ''}`;
    }        
}

Answer 2

我最终使用的是 componentDidMount 函数来调用 class_name 函数来填充状态属性然后在渲染函数上输出状态的 class 名称

ReactJS Promise 逻辑

ReactJS Promise logic

javascript

jsx

promise

reactjs