在反应中有条件地渲染内容

Question

我有一个功能组件，它将两个项目作为道具。每个属性的值可以是 undefined、""、null、"null" 或有效字符串（例如 "test"）。

我需要根据值有条件地渲染这些道具

如果 prop1 和 prop2 都存在，那么它应该显示为 prop1(prop2)，如果其中一个存在，那么它应该是 prop1 或者只是prop2。如果两者都不存在，则应显示“不可用”。只应采用有效的字符串。如果值有 undefined、""、null、"null"，则不应显示。

我在建立逻辑时遇到问题。这是我试过的。

const Test = (props) => {
   let { prop1, prop2 } = props;
    let content: string;
    if ((!prop1 || prop1 === "null") && (!prop2 || prop2 === "null")) {
        content = "Not Available";
    } else if (!!prop1 && !!prop2) {
        content = `${prop1} (${prop2})`;
    } else {
       content = `${prop1 || prop2}`;
    }
   
  return (
    <>
      {content}
    </>
  );

}

Answer 1

我想这本身就是一个棘手的情况，所以如果它看起来有点奇怪我也不会太担心。一种想法是将组件代码组织成变量和更小的函数，如下所示：

const isDefined = (value) => value !== "null" && !!value
const buildString = (prop1, prop2) => {
  let string = prop1 || prop2
  return prop1 && prop2
    ? `${string} (${prop2})`
    : string
}

const Test = ({ prop1, prop2 }) => {
  const someDefined = isDefined(prop1) || isDefined(prop2);
   
  return (
    <>
      {!someAreDefined && "Not Available"}
      {someAreDefined && buildString(prop1, prop2)}
    </>
  );
}

我认为这有助于提高可读性和理解该组件的流程和可能的输出。

Answer 2

returns 值是否有效的单独函数怎么样？

function propIsValid(value) {
  // valid if truthy and not "null" (string)
  return !!prop && value != "null";
}

上面检查了一个 thuthy 值，这意味着所有假值都被认为是无效的。这包括 null、undefined 和 ""，还包括 false、NaN 和 0。这可能是问题，也可能不是问题，具体取决于您的情况。

如果您想要更有针对性的方法，您可以使用以下方法：

const invalid = [undefined, null, "", "null"];
return !invalid.includes(value);

然后将您的组件简化为：

const Test = ({ prop1, prop2 }) => {
  const allValid   = [prop1, prop2].every(propIsValid);
  const firstValid = [prop1, prop2].find(propIsValid);

  if (allValid) {
    return <>{prop1}({prop2})</>;
  } else if (firstValid) {
    return <>{firstValid}</>;
  } else {
    return <>Not Available</>;
  }
}

这使用了every() to check if both are valid, but this could also be written as propIsValid(prop1) && propIsValid(prop2). find() is used to find the first valid value (if any), this does assume that a valid value is always thuthy.

Answer 3

就用一个三元

(prop1 && !/null/.test(prop1)) && (prop2 && !/null/.test(prop2)) ? `${prop1}(${prop2})` : prop1 && !/null/.test(prop1) ? `${prop1}` : prop2 && !/null/.test(prop2) ? `${prop2}` : 'Not Available';

由于 undefined "" 和 null 本质上是错误的，因此它只会在需要时使用正则表达式来测试 null 模式。如果您希望将任何其他值视为无效，只需将它们添加到正则表达式即可。

Answer 4

这可能是实现预期目标的一种方法objective:

const isPropInvalid = inp => [undefined, null, '', ' '].includes(inp);

const content = isPropInvalid(prop1)
  ? isPropInvalid(prop2) ? 'Not Available' : prop2
  : isPropInvalid(prop2) ? prop1 : `${prop1} (${prop2})`

说明

set-up 一个数组，其元素被视为 'invalid'（即未定义、空、''、'null'）
使用简单的 if-else 或 ?: ternary-operators 根据一个或两个属性是否无效将适当的值分配给 content。

代码片段

const isPropInvalid = inp => [undefined, null, '', 'null'].includes(inp);

const content = (prop1, prop2) => isPropInvalid(prop1)
    ? isPropInvalid(prop2) ? 'Not Available' : prop2
  : isPropInvalid(prop2) ? prop1 : `${prop1} (${prop2})`;

console.log(content('abc', 'xyz'));
console.log(content());
console.log(content(null, 'xyz'));
console.log(content('abc', 'null'));

在反应中有条件地渲染内容

Conditionally rendering content in react

javascript

ecmascript-6

reactjs

react-hooks