根据类型渲染 React 组件

Question

我想知道在 React 中是否有一种方法可以根据组件的类型有条件地渲染组件。 根据文档，您可以通过以下方式定义组件的道具类型：

MyComponent.propTypes = {
  description: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
};

有没有办法使用框架检查类型并根据接收到的道具数据是string还是array来以不同的方式呈现组件？

我知道我可以使用原始 JS 来确定这一点，方法是使用type of或检查数据数组的属性。

if (typeof description === "string") { /* render string component */ }
else { /* render array component */ }

我想知道 React 是否有内置的、更强大的方法来执行此操作。

Answer 1

我想知道 React 是否有内置的、更强大的方法来执行此操作。

description是一个联合道具类型。

因此，您需要通过使用render props来实现渲染逻辑。

const StringDescription = (props) => {...}
const ArrayDescription = (props) => {...}

function renderDescription(description) { // rendering logic / strategy
  switch(typeof description) {
    case 'string':
      return <StringDescription />;
    default:
      return <ArrayDescription />;
  }
}

<Description
  description={description}
  render={renderDescription} // render prop
/>