根据组件的类型渲染React组件

Question

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

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

有没有一种方法，使用框架来检查类型并根据接收的prop数据是string还是array来不同地呈现组件？

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

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
/>