Question

所以我无法使用js Promise className回调来计算这个关于React组件中的promise的逻辑。所以我正在做的是在网格中创建一个网格项，并根据它的内容改变类名＆＃34; height2＆＃34;或＆＃34; width2＆＃34;。所以你可以看到函数＆＃34; get_image_dimensions＆＃34;这是从＆＃34; class_name＆＃34;在找到图像时起作用，然后根据返回将其附加到字符串中。但问题显然是它是异步的，因此它将继续运行，并且当它返回到＆＃34; class_name＆＃34;功能。我无法通过回调解决这个问题的原因是因为它是一个反应组件并通过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

这是因为您将同步代码与异步代码混合在一起。要修复它，您需要返回hflights;对于每个if语句。在承诺解决后，返回可拖动部分。您还应该检查async/await，这是使用promises的另一种方式。

library(hflights)
hflights2 <- hflights[1:5,1:5]
hflights2$New_Date = paste0(hflights2$Year,"-",hflights2$Month,"-",hflights2$DayofMonth)
write.csv(hflights2,"hflights2.csv")

Answer 2

我最终使用的是componentDidMount函数来调用class_name函数然后填充state属性然后在render函数输出状态的类名

ReactJS承诺逻辑

2 个答案: