根據類型渲染 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
/>