React组件仅在接收Props时如何实现条件渲染？

要让PropTable组件只在接收到有效Props时才渲染，核心思路是在组件内部判断是否存在需要的Prop值，当Prop存在时返回组件内容，否则返回null（React中返回null就不会渲染任何内容）。

针对你提供的代码示例，修改后的实现如下：

const PropTable = (props) => {
  const { availableProp } = props;

  // 仅当availableProp存在时才渲染组件内容
  if (!availableProp) {
    return null;
  }

  // 这里写原本的组件渲染逻辑
  return (
    <div className="prop-table">
      {/* 你的表格内容 */}
    </div>
  );
};

补充说明 #

• 如果需要判断多个Prop是否存在，可以扩展条件，比如：

  if (!availableProp || !anotherRequiredProp) {
    return null;
  }
  

• 如果你需要判断是否接收到任何Props（而非特定某个），可以检查Object.keys(props).length是否大于0：

  if (Object.keys(props).length === 0) {
    return null;
  }
  

内容的提问来源于stack exchange，提问作者Rajesh