Reactjs 如何避免引导中的重复内容？

在我的网站，我想显示电话号码，我想让电话号码是可点击的，当它被移动网站访问

以下是代码片段：

MyGrid类扩展了React.Component{ 建造师（道具）{ 超级（道具）； this.state={phone:“123”}； } render（）{ 返回(

{this.state.phone}

); } } //渲染它 ReactDOM.render( , document.getElementById（“react”） );

使用可避免重复内容在客户端上呈现两次。以下是

react-responsive

中的代码片段：

import React from 'react'
import { useMediaQuery } from 'react-responsive' 

const Example = () => {
  const isDesktopOrLaptop = useMediaQuery({
    query: '(min-device-width: 1224px)'
  })
  const isBigScreen = useMediaQuery({ query: '(min-device-width: 1824px)' })
  const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' })
  const isTabletOrMobileDevice = useMediaQuery({
    query: '(max-device-width: 1224px)'
  })
  const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
  const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' })
 
  return (
    <div>
      <h1>Device Test!</h1>
      {isDesktopOrLaptop && <>
        <p>You are a desktop or laptop</p>
        {isBigScreen && <p>You also have a huge screen</p>}
        {isTabletOrMobile && <p>You are sized like a tablet or mobile phone though</p>}
      </>}
      {isTabletOrMobileDevice && <p>You are a tablet or mobile phone</p>}
      <p>Your are in {isPortrait ? 'portrait' : 'landscape'} orientation</p>
      {isRetina && <p>You are retina</p>}
    </div>
  )
}

从“React”导入React
从“react responsive”导入{useMediaQuery}
常量示例=（）=>{
const isDesktopOrLaptop=useMediaQuery({
查询：'（最小设备宽度：1224px）'
})
const isBigScreen=useMediaQuery（{query:'（最小设备宽度：1824px）}）
const isTabletOrMobile=useMediaQuery（{query:'（最大宽度：1224px）}）
const isTabletOrMobileDevice=useMediaQuery({
查询：'（最大设备宽度：1224px）'
})
const isPortrait=useMediaQuery（{query:'（方向：纵向）}）
const isRetina=useMediaQuery（{query:'（最小分辨率：2dppx）}）
返回(
设备测试！
{isDesktopOrLaptop&&
您是台式机还是笔记本电脑

{isBigScreen&&你也有一个大屏幕
}
{isTabletOrMobile&&您的大小就像平板电脑或手机一样
}
}
{isTabletOrMobileDevice&&您是平板电脑或手机
}
您的方向为{isPortrait？'纵向'：'横向'}

{isRetina&&你是视网膜
}
)
}

---

原始的引导方式将根据屏幕大小显示内容。但是使用

react-responsive

方式将根据屏幕大小生成内容。因此，根据屏幕大小，搜索引擎只能获得一份内容。

我没有发现这方面的问题，但如果您想避免，可以使用PackageHanks，我想这会管用的。我只是想知道是否有一些引导/反应引导魔术可以使事情更加集成（因此我不需要检查xs/md的定义，然后手动在反应响应上键入它）。@NishargShah从用户那里得知，这根本不是问题，只有当我的搜索引擎警告我时，问题才会出现，因为电话号码显示了两次。因此，我认为我需要在JS端这样做，这样它就不会有重复的内容。