列表渲染中的条件逻辑挑战
在react开发中，我们经常利用数组的map方法来动态生成组件列表。例如，从一个数据集合中筛选并渲染表格行（
考虑以下场景，我们根据credentials数组生成一系列DataRow组件，但仅在满足特定logic条件时才渲染：
const credentialRows = credentials.map((credential_record) => {
if (
logic... // 复杂的业务逻辑判断
) {
const credential_id = credential_record.credential_exchange_id;
const credentialState = credential_record.state.replaceAll('_', ' ') || '';
const dateCreated =
new Date(credential_record.created_at).toLocaleString() || '';
let credentialName = '';
if (
credential_record.credential_proposal_dict !== null &&
credential_record.credential_proposal_dict !== undefined
) {
credentialName = credential_record.credential_proposal_dict.schema_name.replaceAll(
'_',
' '
);
}
return (
{
openCredential(history, credential_id);
}}
>
{credentialName}
{credentialState}
{dateCreated}
);
}
// 缺少else分支的处理
});上述代码片段中，if语句的else分支缺失，这会导致ESLint发出警告，提示“Expected to return a value at the end of arrow function”。尝试返回空字符串''会导致React报错，因为它期望JSX元素。而尝试返回一个空的DataRow组件（例如
解决方案：返回null
在React中，当您希望在条件不满足时渲染“无内容”时，最简洁、最符合React哲学的方式是返回null。React在渲染过程中会忽略null、false、undefined等值，因此它们不会在DOM中生成任何元素。
将上述代码修改为在else分支返回null，即可完美解决ESLint警告并实现预期行为：
const credentialRows = credentials.map((credential_record) => {
if (
logic... // 复杂的业务逻辑判断
) {
const credential_id = credential_record.credential_exchange_id;
const credentialState = credential_record.state.replaceAll('_', ' ') || '';
const dateCreated =
new Date(credential_record.created_at).toLocaleString() || '';
let credentialName = '';
if (
credential_record.credential_proposal_dict !== null &&
credential_record.credential_proposal_dict !== undefined
) {
credentialName = credential_record.credential_proposal_dict.schema_name.replaceAll(
'_',
' '
);
}
return (
{
openCredential(history, credential_id);
}}
>
{credentialName}
{credentialState}
{dateCreated}
);
} else {
// 当条件不满足时，返回null，React将不渲染任何内容
return null;
}
});现在，credentialRows数组中将包含DataRow组件和null的混合。当这个数组被放置在父组件（如
{credentialRows}React会自动过滤掉所有的null值，只渲染实际的DataRow组件。
注意事项与最佳实践
- key属性的重要性： 即使您返回null，对于列表中实际渲染的元素，key属性仍然至关重要。key帮助React识别列表中哪些项已更改、添加或删除，从而提高渲染效率。对于被null替换的项，它们本身不需要key，因为它们根本没有被渲染。
-
条件渲染的多种方式： 除了在map回调中使用if/else返回null，React还支持其他条件渲染方式：
-
逻辑与运算符 &&： 当条件为真时渲染元素，否则渲染false（React同样会忽略）。
{condition &&} -
三元运算符 ? :： 在两种情况下渲染不同内容，或渲染内容和null。
{condition ?: null} 在map回调中，如果逻辑简单，三元运算符也是一个不错的选择：
const credentialRows = credentials.map((credential_record) => ( logic... // 复杂的业务逻辑判断 ? ({/* ...内容... */} ) : null ));
-
逻辑与运算符 &&： 当条件为真时渲染元素，否则渲染false（React同样会忽略）。
- 避免空字符串： 如前所述，返回空字符串''会导致React报错，因为它期望有效的JSX元素或null、undefined、false。
- ESLint规则： expected-return或consistent-return等ESLint规则旨在确保函数的所有执行路径都有明确的返回值。使用null作为条件不满足时的返回值，能够很好地满足这些规则的要求，保持代码的规范性。
总结
在React/JSX中进行条件渲染时，当您希望某个元素在特定条件下不被渲染时，最专业且符合React设计理念的方法是返回null。这不仅能有效解决ESLint关于函数返回值的警告，还能保持代码的整洁和可读性。通过合理运用null，结合key属性的最佳实践，您可以构建出高效且易于维护的React组件列表。
