3 回答

TA貢獻1848條經驗 獲得超10個贊
您可以將單元格內容存儲在變量中:
let content;
if(email) {
content = <span>...</span>;
} else if(icon) {
content = <span>...</span>;
} else {
content = <span>...</span>;
}
return <td>{content}</td>;

TA貢獻1807條經驗 獲得超9個贊
另一種選擇是使用枚舉之類的東西來呈現:
if (email) {
content = 'email';
else if (icon) {
content = 'icon';
} else {
content = 'other';
}
return (
<td>
{{
email: <span>...</span>,
icon: <span>...</span>,
other: <span>...</span>,
}[content]}
</td>);
這在這里更詳細地解釋:https ://reactpatterns.js.org/docs/conditional-rendering-with-enum/

TA貢獻1873條經驗 獲得超9個贊
我發現提取復雜功能以提高可讀性很有用:
import React from 'react';
// extracted functionality
const emailAction = (email, icon) => {
if (email) {
return <span>Do This</span>;
} else {
if (icon) {
return <span>Do That</span>;
} else {
return <span>Do Something Else</span>;
}
}
};
// your Component
export const TableData = (props) => {
return <td>{emailAction(props.email, props.icon)}</td>;
};
添加回答
舉報