React中如何为动态切换的组件设置不同Props

这里有两种简洁的方式实现你想要的效果，不用重复写条件渲染：

方案1：封装一个动态父组件 #

创建一个通用的封装组件，内部处理服务端/客户端的组件切换和Props传递：

const DynamicRouter = ({ children }) => {
  if (runtime.isServerSide) {
    return <Server serverProp={123}>{children}</Server>;
  }
  return <Client clientProp={false}>{children}</Client>;
};

使用的时候直接用这个封装好的组件就行：

<DynamicRouter>
  <Child />
</DynamicRouter>

方案2：用工厂函数生成带Props的组件 #

写一个函数，根据环境返回已经绑定好对应Props的组件：

const getRouter = () => {
  if (runtime.isServerSide) {
    return (props) => <Server serverProp={123} {...props} />;
  }
  return (props) => <Client clientProp={false} {...props} />;
};

const Router = getRouter();

使用方式和你最初的写法一致：

<Router>
  <Child />
</Router>

如果后续需要额外传递公共Props，方案2里的{...props}还能帮你透传，灵活性更高。

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