反应存储性+自举

Question

我只想知道React中的响应性是如何实现的？

有不同的方法来实现响应，比如

css-grid bootstrap-grid react-bootstrap

能让我知道在react中进行响应的首选方法是什么吗？

致以敬意，

Answer 1

只需使用普通的JS，这就是React的美妙之处。我个人这么做：

class Responsive extends Component {
  state = { isMobile: false };

  componentDidMount() {
    // use css media quries
    this.isMobile = window.matchMedia("(max-width: 767px)");

    // test on first run
    this.handleIsMobile({ matches: this.isMobile.matches });

    // listen to changes after first run
    this.isMobile.addListener(this.handleIsMobile);
  }

  componentWillUnmount() {
    // stop listening when unmounted
    this.isMobile.removeListener(this.handleIsMobile);
  }

  handleIsMobile = ({ matches }) => this.setState({ isMobile: matches });

  render() {
    if (this.state.isMobile) return <div>MOBILE</div>;

    return <div>DESKTOP</div>;
  }
}

Answer 2

首先提到这个，Bootstrap webpack

这是在reactjs项目中使用bootstrap的一种方式。

这样做好处是您可以访问最新的引导css。

使用它的缺点是在reactjs中使用jquery插件很复杂。Hovewr如果你只对css感兴趣，那么它是完美的。

使用这个，你可以直接使用文档中的bootstrap类，并获得更多的控制。只需使用className而不是class

如果你想要简单的设置，你可以使用reactstrap link

其他框架包括react-bootstrap link