Question

我试图使用从Typescript函数返回的值，并相应地在React中渲染页面。我尝试从函数中检索为返回值的两个特定值是getIcon()和getSpaces()

的输出

这是我尝试呈现页面的地方

{
        key: 'column3',
        name: 'Column3',
        onRender: (item: IDetailsListModuleItem) => {
            var icon = this.getIcon(item.sizeDifference);
            console.log(icon);
            return <span>{item.sizeDifference} {this.generateSpace(5)} <img src={this.getIcon(item.sizeDifference)} alt="Increase" /></span>;
        },
    },

我使用的功能在下面定义

public generateSpace(numSpaces: number){
  var allSpace = '';
  var spaces = '&nbsp; ';
  for(var i = 0;i<numSpaces;i++){
    allSpace += spaces;
  }
  return allSpace;
}

public getIcon(sizeDifference: number){
  return sizeDifference>0 ? {increaseIcon}:{decreaseIcon}
}

我确实尝试过内联，但这似乎行得通。

return <span>{item.sizeDifference}&nbsp; &nbsp; &nbsp; &nbsp;<img src={item.sizeDifference>0?increaseIcon:decreaseIcon} alt="Increase" /></span>;

但是，对于更复杂的操作，我想了解如何使用函数返回的值。

Answer 1

如果我们以您的示例为例，

var icon = this.getIcon(item.sizeDifference);
return <img src={this.getIcon(item.sizeDifference)} alt="Increase" />;

您只需执行以下操作：

var icon = this.getIcon(item.sizeDifference);
return <img src={icon} alt="Increase" />;

任何用于内联调用方法的地方都可以用设置为相同结果的变量代替。

从Typescript中的函数返回的React中使用值

1 个答案: