css 如何根据屏幕大小修改HTML/JSX

8yparm6h 于 2022-12-20 发布在其他

关注(0)|答案(1)|浏览(117)

我想根据屏幕大小更改<p>标记的文本。我看到了两种方法：
1.将文本创建为：

<p> 
  <span className="one">text one</span>
  <span className="two">text two</span> 
</p>

并使用媒体查询修改CSS，例如：

@media (max-width: 481px) {
  .one {
    display: none;
  }
  .two {
    display: inline;
  }
}

另一个用于使用组件内的实际React/JS：

let innerText;

React.useEffect(() => {
  if (window.innerWidth <= 481) {
    innerText = 'text one';
  } else {
    innerText = 'text two';
  }
}, [window.innerWidth]);

return (
  <p>{innerText}</p>
);

这些方法中哪一种对于此用例性能更高？哪一种通常被认为是最佳实践？是否有一些我忽略的方法是首选的？我担心使用React方法不会在更改屏幕大小时触发数百次重新渲染，但我也担心不必要地渲染两个跨度。

css

来源：https://stackoverflow.com/questions/74839384/how-to-modify-html-jsx-based-on-screen-size

1条答案

按热度按时间

moiiocjp1#

无需CSS

const DEFAULT_MOBILE_BREAKPOINT = 1000;

export const useIsMobile = (breakpoint = DEFAULT_MOBILE_BREAKPOINT) => {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const onResize = () => {
      setIsMobile(window.innerWidth < breakpoint);
    };
    window.addEventListener("resize", onResize);
    onResize();
    return () => window.removeEventListener("resize", onResize);
  }, []);
  return isMobile;
};

您可以重用这个钩子来设置不同的元素/类。

import {useIsMobile} from "../hooks/useIsMobile";


const App = () => {

  const text1 = "Hello World!"
  const text2 = "Goodbye World..."

  return (
    <body className={ useIsMobile(700) ? "dark" : "light" }>

      <p>{ useIsMobile() ?  text1 : text2 }</p>

    </body>
  );
};

赞(0）回复(0）举报 2022-12-20

我来回答

css 如何根据屏幕大小修改HTML/JSX

1条答案

相关问题

热门标签

最新问答