在 React 中响应式地隐藏元素

Question

我正在使用 Reactstrap，并希望在设备 mobile.I 使用与我们在 bootstrap 中使用的相同的类名时隐藏我的输入元素，但类名在 [=16] 时不起作用=] 有什么方法可以像 reactstap 中的 bootstrap 那样做吗？

 <input className="d-sm-none d-md-block" type="text"placeholder="Search"/>

我试过上面的代码隐藏它但是它不起作用，有什么办法可以做到吗？

Answer 1

在呈现输入的父组件中；

这是假设您有功能性的 React 组件。 Class 个组件可以应用相同的逻辑。

  useEffect(() => {

    setDeviceWidth(window.innerWidth);

  const setDeviceWidth = width => {
    if (width < 767) {
      return setDevice("mobile");
    } else if (width > 767 && width < 1280) {
      return setDevice("tablet");
    }
    return setDevice("desktop");
  };

  }, []);

管理状态

const [device,setDevice]=useState("")

有条件地呈现输入

{device==="mobile"?null:<input/>}

在 React 中响应式地隐藏元素

Hiding the element Responsively in React

reactjs

reactstrap