JavaScript / 前端 / 译文 · 10月 7, 2020 0

react-media

react-media Travis npm package

react-media是一个媒体查询React组件

<Media> 组件会监听 CSS 媒体查询 并根据是否匹配来决定是否渲染指定的内容。

安装

使用 npm:

$ npm install --save react-media

然后,引用该组件:

// 使用 ES 模块
import Media from 'react-media';

// 使用 CommonJS 模块
var Media = require('react-media');

unpkg上的UMD模块也可以用:

<script src="https://unpkg.com/react-media"></script>

你会在 window.ReactMedia 上找到该库.

基础使用

渲染 <Media> 组件并传递一个名为 queryprops,它的值必须是一个有效的 CSS媒体查询值。 组件的子节点 children 必须是一个函数,函数接收一个布尔值作为参数,表示是否与指定的媒体查询匹配

import React from 'react';
import Media from 'react-media';

class App extends React.Component {
  render() {
    return (
      <div>
        <Media query="(max-width: 599px)">
          {matches =>
            matches ? (
              <p>The document is less than 600px wide.</p>
            ) : (
              <p>The document is at least 600px wide.</p>
            )
          }
        </Media>
      </div>
    );
  }
}

props 属性

有三个props属性可以让你渲染你的内容,他们是有区别的:

prop属性名 描述 例子
render 仅在查询匹配时调用。 如果您只想为匹配的查询呈现内容,这是一个很简便的方法。 <Media query="..." render={() => <p>I matched!</p>} />
children (function) 接受一个布尔值参数, 表示媒体查询是否匹配。 如果你需要在查询不匹配时呈现某些内容,可以使用该属性 <Media query="...">{matches => matches ? <p>I matched!</p> : <p>I didn't match</p>}</Media>
children (react element) 如果你在 <Media> 内部渲染 React 元素, 它会在查询匹配时渲染。这和render属性是一样的,但是,无论是否匹配,都将创建组件实例。一般用render更好一点。(详细). <Media query="..."><p>I matched!</p></Media>

query

除了传递有效的媒体查询字符串外, query prop 还可以接收一个对象,和 React对内联样式对象的内置支持 一样。 这些对象通过 json2mq 转换为CSS媒体查询。

import React from 'react';
import Media from 'react-media';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>These two Media components are equivalent</h1>

        <Media query={{ maxWidth: 599 }}>
          {matches =>
            matches ? (
              <p>The document is less than 600px wide.</p>
            ) : (
              <p>The document is at least 600px wide.</p>
            )
          }
        </Media>

        <Media query="(max-width: 599px)">
          {matches =>
            matches ? (
              <p>The document is less than 600px wide.</p>
            ) : (
              <p>The document is at least 600px wide.</p>
            )
          }
        </Media>
      </div>
    );
  }
}

媒体查询对象的键名遵循驼峰命名规则,数字将会自动添加 px 后缀。 点击 json2mq 文档 查看更多的媒体查询对象的例子。

onChange

你可以传递一个onChange函数,它会在查询状态改变时调用。你可以使用它来触发在生命周期函数之外触发副作用。

import React from 'react';
import Media from 'react-media';

class App extends React.Component {
  render() {
    return (
      <div>
        <Media
          query="(max-width: 599px)"
          onChange={matches =>
            matches
              ? alert('The document is less than 600px wide.')
              : alert('The document is at least 600px wide.')
          }
        />
      </div>
    );
  }
}

服务端渲染 (SSR)

如果在服务器上使用<Media>组件,它会默认将匹配。你可以通过设置defaultMatches prop来覆盖默认行为。

服务端渲染时你可以使用 defaultMatches prop 在服务器上设置初始状态来匹配你想匹配的内容。你可以服务器端代码中分析HTTP请求的用户代理字符串来检测用户的设备。

initialState = {
  device: 'mobile' // 添加自己的业务逻辑
};

<div>
  <Media
    query="(max-width: 500px)"
    defaultMatches={state.device === 'mobile'}
    render={() => <Text>Render me below medium breakpoint.</Text>}
  />

  <Media
    query="(min-width: 501px)"
    defaultMatches={state.device === 'desktop'}
    render={() => <Text>Render me above medium breakpoint.</Text>}
  />
</div>;

targetWindow

如果希望针对与运行代码时window对象不同的窗口对象来评估查询,则可以指定可选的targetWindow prop。 如果要将组件树的一部分呈现为iframe弹出窗口,这将非常有用。请查看 PR issue 以获取更新信息。

和 react-responsive 比较

如果你对rect-mediareact-responsive有何不同感到好奇,请参阅此评论

冀ICP备19028007号