React中如何仅传递指定class为message-content的div作为props.children？

要只传递带message-content类的div作为props.children，可以根据你的代码场景选择以下两种方法：

方法一：拆分组件结构，直接传入目标内容 #

如果infoContent是从外部传入组件的，调整组件调用方式，直接把message-content容器作为props.children传递：

组件定义 #

const MessageComponent = (props) => {
  const isMobileView = useMobileView("desktop");
  
  if (isMobileView) {
    return <div className="message-mobile">{props.children}</div>;
  }

  // 非移动端渲染完整结构
  return (
    <div className="message">
      <div className="message-title-info">Alert</div>
      {/* 直接使用传入的message-content */}
      {props.children}
    </div>
  );
};

组件调用 #

<MessageComponent>
  <div className="message-content">{infoContent}</div>
</MessageComponent>

方法二：内部提取目标元素复用 #

如果infoContent是组件内部生成的，直接把message-content部分单独定义为变量，在移动端和非移动端场景复用：

const MessageComponent = () => {
  const isMobileView = useMobileView("desktop");
  // 单独提取需要复用的message-content元素
  const messageContentElement = (
    <div className="message-content">{infoContent}</div>
  );

  if (isMobileView) {
    return <div className="message-mobile">{messageContentElement}</div>;
  }

  return (
    <div className="message">
      <div className="message-title-info">Alert</div>
      {messageContentElement}
    </div>
  );
};

这两种方法都能避免传递整个外层message容器，只保留你需要的message-content部分，根据内容来源（外部传入/内部生成）选择对应方案即可。

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