뷰포트 크기에 따라 조건부로 렌더링합니다.

뷰포트 크기에 따라 조건부로 렌더링합니다.

이것은 리액트 몬스터에게는 쉬운 것입니다.:) 조건은 기재되어 있습니다만, 컨스트럭터의 뷰포트 사이즈를 어떻게 처리하면 좋을지 알 수 없습니다.단순하고 간단하게 뷰포트 사이즈가 1451px 이상일 때, 1450px 이하일 때 다른 요소를 보여주고 싶습니다.

이것은 내 코드입니다(간체).

class My Class extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isDesktop: "1450px" //This is where I am having problems
        };
    }

    render() {
        const isDesktop = this.state.isDesktop;

        return (
            <div>
                {isDesktop ? (
                    <div>I show on 1451px or higher</div>
                ) : (
                    <div>I show on 1450px or lower</div>
                )}
            </div>
        );
    }
}

ComponentWillMount 또는 ComponentDidMount와 함께 작업하는 것으로 가정할 수 있습니다.솔직히 잘 모르겠어요.리액트는 처음입니다.

여러분, 잘 부탁드립니다.

Component Will Mount 또는 Component Did Mount와 함께 작업하는 것으로 가정할 수 있습니다.

네, 여러분들도 들으셔야 돼요.resize이벤트 및 변경 시 내부 상태 업데이트구성 요소가 마운트될 때 이벤트 핸들러를 추가하여 이 작업을 수행할 수 있습니다.여기서 전체 예를 사용해 보십시오.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isDesktop: false //This is where I am having problems
    };

    this.updatePredicate = this.updatePredicate.bind(this);
  }
  componentDidMount() {
    this.updatePredicate();
    window.addEventListener("resize", this.updatePredicate);
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.updatePredicate);
  }

  updatePredicate() {
    this.setState({ isDesktop: window.innerWidth > 1450 });
  }

  render() {
    const isDesktop = this.state.isDesktop;

    return (
      <div>
        {isDesktop ? (
          <div>I show on 1451px or higher</div>
        ) : (
          <div>I show on 1450px or lower</div>
        )}
      </div>
    );
  }
}

같은 문제가 발생한 후 여기에 최신 업데이트를 게시하기 위해 기능 컴포넌트와useEffect/useState리액트 훅:

const MyFunction = () => {
  const [isDesktop, setDesktop] = useState(window.innerWidth > 1450);

  const updateMedia = () => {
    setDesktop(window.innerWidth > 1450);
  };

  useEffect(() => {
    window.addEventListener("resize", updateMedia);
    return () => window.removeEventListener("resize", updateMedia);
  });

  return (
    <div>
      {isDesktop ? (
        <div>I show on 1451px or higher</div>
      ) : (
        <div>I show on 1450px or lower</div>
      )}
    </div>
  );
}

NextJs를 사용하면...다음과 같은 오류가 발생합니다.창이 정의되지 않았습니다.여기 오류가 없는 코드가 있습니다. 즐기세요.

먼저 창의 크기가 1450px인지 확인합니다(사용자가 창의 크기를 조정하지 않으면 모든 코드가 무용지물이 되기 때문입니다).

다만, 유저가 윈도우의 사이즈를 변경할지도 확인할 필요가 있습니다.직접 보다

    export default function MyFunction() {
        const [isDesktop, setDesktop] = useState(false);

  useEffect(() => {
    if (window.innerWidth > 1450) {
      setDesktop(true);
    } else {
      setDesktop(false);
    }

    const updateMedia = () => {
      if (window.innerWidth > 1450) {
        setDesktop(true);
      } else {
        setDesktop(false);
      }
    };
    window.addEventListener('resize', updateMedia);
    return () => window.removeEventListener('resize', updateMedia);
  }, []);
    
      return (
          <div>
              {isDesktop ? (
                  <div>I show on 1451px or higher</div>
              ) : (
                  <div>I show on 1450px or lower</div>
              )}
          </div>
      );
    }

당신의 코드의 문제점은 크기가 조정될 때만 작동한다는 것입니다. 여기 제가 가지고 있습니다.handleWindowResiz함수는 너비를 다음과 같이 설정합니다.window.innerWidth그리고 그것을 에 비교합니다.breakPointUI를 조건부로 렌더링하려면 사용자가 화면 크기를 조정하면 이벤트 청취자가 트리거되고handleWindowResiz호출되어 리셋됩니다.width새것까지window.innerWidth원하는 UI를 얻을 수 있습니다.따라서 구성 요소가 처음 렌더링될 때와 사용자가 화면 너비를 조정할 때 UI가 항상 올바르게 렌더링됩니다.

const MyFunction = () => {

  const [width, setWidth] = React.useState(window.innerWidth);
  const breakPoint = 1450;

 

  useEffect(() => {
   const handleWindowResize = () => setWidth(window.innerWidth);
   window.addEventListener("resize", handleWindowResize);

    
   return () => window.removeEventListener("resize", handleWindowResize);
  },[]);

  return (
    <div>
      {width > breakPoint? (
        <div>I show on 1451px or higher</div>
      ) : (
        <div>I show on 1450px or lower</div>
      )}
    </div>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

class My Class extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          isDesktop: window.innerHeight > 1450,
      };
  }

  render() {
      const isDesktop = this.state.isDesktop;

      return (
          <div>
              {isDesktop ? (
                  <div>I show on 1451px or higher</div>
              ) : (
                  <div>I show on 1450px or lower</div>
              )}
          </div>
      );
  }}

자세한 내용은 React에서 뷰포트/창 높이 가져오기JS

언급URL : https://stackoverflow.com/questions/46586165/react-conditionally-render-based-on-viewport-size