将简单react组件写的很装逼——react-document-title组件实现

前端之家收集整理的这篇文章主要介绍了将简单react组件写的很装逼——react-document-title组件实现前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_301_0@因为react是单页应用,所以我们可能需要根据不同的路由改变文档的title,那么,这时候你可能就会用到react-document-title插件

@H_301_0@这个插件文件代码41行,主要导入了下面3个依赖包:

  1. var React = require('react'),PropTypes = require('prop-types'),withSideEffect = require('react-side-effect');
@H_301_0@react-side-effect是一个类似Connect组件的容器,通常它被称为高阶组件。

@H_301_0@但是,实际上,我们可以思考,是否可以不使用这个插件完成不同路由修改title的功能,答案是当然可以。

@H_301_0@如果使用原生js,修改title的代码只需要一行:

  1. document.title = '我是标题'
@H_301_0@在react中,我们可以使用非常少的代码封装出一个公共组件,来修改每个路由的title。

  1. import React from 'react'
  2. import PropTypes from 'prop-types'
  3. export default class ReactDocumentTitle extends React.Component {
  4. setTitle() {
  5. const { title } = this.props
  6. document.title = title
  7. }
  8. componentDidMount() {
  9. this.setTitle()
  10. }
  11. componentDidUpdate() {
  12. this.setTitle()
  13. }
  14. render() {
  15. return React.Children.only(this.props.children)
  16. }
  17. }
  18. ReactDocumentTitle.propTypes = {
  19. title: PropTypes.string.isrequired
  20. }
@H_301_0@这份代码是将react-side-effect和react-document-title合并到一起做的事情,我把它叫做精简版。

@H_301_0@使用该组件:

  1. import ReactDocumentTitle from 'path/ReactDocumentTitle'
  2.  
  3. render() {
  4. return (
  5. <ReactDocumentTitle title="文档标题">
  6. //这里仅能有一个唯一的root元素。
  7. </ReactDocumentTitle>
  8. )
  9. }
@H_301_0@如果你对高阶组件的写法有兴趣,可以研究一下react-side-effect。需要注意的是,这个高阶组件的代码是使用了babel编译后的结果,你可能看起来没那么容易理解。

@H_301_0@如果把我上面写的那段代码使用babel编译,你再试着理解一下:

  1. 'use strict';
  2.  
  3. exports.__esModule = true;
  4.  
  5. var _react = require('react');
  6.  
  7. var _react2 = _interoprequiredefault(_react);
  8.  
  9. var _propTypes = require('prop-types');
  10.  
  11. var _propTypes2 = _interoprequiredefault(_propTypes);
  12.  
  13. function _interoprequiredefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  14.  
  15. function _classCallCheck(instance,Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  16.  
  17. function _possibleConstructorReturn(self,call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
  18.  
  19. function _inherits(subClass,superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function,not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype,{ constructor: { value: subClass,enumerable: false,writable: true,configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass,superClass) : subClass.__proto__ = superClass; }
  20.  
  21. var ReactDocumentTitle = function (_React$Component) {
  22. _inherits(ReactDocumentTitle,_React$Component);
  23.  
  24. function ReactDocumentTitle() {
  25. _classCallCheck(this,ReactDocumentTitle);
  26.  
  27. return _possibleConstructorReturn(this,_React$Component.apply(this,arguments));
  28. }
  29.  
  30. ReactDocumentTitle.prototype.setTitle = function setTitle() {
  31. var title = this.props.title;
  32.  
  33. document.title = title;
  34. };
  35.  
  36. ReactDocumentTitle.prototype.componentDidMount = function componentDidMount() {
  37. this.setTitle();
  38. };
  39.  
  40. ReactDocumentTitle.prototype.componentDidUpdate = function componentDidUpdate() {
  41. this.setTitle();
  42. };
  43.  
  44. ReactDocumentTitle.prototype.render = function render() {
  45. return _react2.default.Children.only(this.props.children);
  46. };
  47.  
  48. return ReactDocumentTitle;
  49. }(_react2.default.Component);
  50.  
  51. exports.default = ReactDocumentTitle;
  52.  
  53. ReactDocumentTitle.propTypes = {
  54. title: _propTypes2.default.string.isrequired
  55. };
@H_301_0@这里就有一个非常有趣的地方,以后你使用ES6写了一个react组件,然后再编译成ES5之后,发布到github上,别人就会觉得你的代码高大上很多。

猜你在找的React相关文章