如何使用内联开关返回jsx元素？

Question

我试图返回一个带有内联开关的元素。 但是我只得到一个空的<span> </span> 。 我究竟做错了什么？

 getRowTdForHeader: (header: string, entry: response) => {
            return (<span>
                {() => {
                    switch (header) {
                        case "Name":  return entry.name;
                        case "Type": return entry.type;
                        default: return entry.name;
                    }
                } }
            </span>);
        }

结果是一个空span ，如果我在断点处放一个断点，它根本不会进入switch语句。 我希望尽可能保留它的内衬。 顺便说一句，如果我不内联的话，该开关可以正常工作。

Answer 1

您必须将箭头功能包装在父母中。

{(() => {
    switch (header) {
                        case "Name":  return entry.name;
                        case "Type": return entry.type;
                        default: return entry.name;
                    }
})()}

Answer 2

您定义了一个函数但没有调用它

() => {
    switch (header) {
        case "Name":  return entry.name;
        case "Type": return entry.type;
        default: return entry.name;
    }
}

Answer 3

我建议您将结果放入变量中，然后使用它：

getRowTdForHeader: (header: string, entry: response) => {
    let str: string;
    switch (header) {
        case "Name":  str = entry.name;
        case "Type": str = entry.type;
        default: str = entry.name;
    }

    return <span> { str } </span>;
}