编写我的第一个 React 组件: back2top

更新日期: 2015-12-12 阅读次数: 5757 分类: ReactJS

主要功能,点击右下角的“返回页首”按钮,自动回到当前网页的头部。

组件源码地址 back2top on Github

实际效果参考本页的右下角 链接

更方便的复用

目标: 只需要引入 react.js. (当前版本 0.12.2) 如何做到版本兼容性测试?

为了减少引用依赖,将 JSXTransformer.js 剔除,就需要将 React JSX code 转换成标准的 js 代码。 首先安装工具

sudo npm install -g react-tools

当 JSX 发生修改时,做实时转换

jsx --watch src/ build/

可以缩写成

jsx -w src/ build/

如果遇到 JSX 的语法错误,可以看到详细的错误提示,例如

Error while reading module back2top:
Error: Parse Error: Line 40: Unexpected token ILLEGAL

更进一步的简化使用难度,自动创建组件的 container。

var back2topDiv = document.createElement('div');
back2topDiv.setAttribute("id", "back-to-top");
document.body.appendChild(back2topDiv);

React.render(
  <BackToTop />,
  document.getElementById('back-to-top')
);

代码结构

主要分为 JSX 目录和编译后的 JS 目录

|_ README.md
|_ src
   |_ back2top.js
|_ build
   |_ back2top.js

如何将 CSS 整合入 React JSX 文件

这样做的好处是不需要再增加一个 CSS 文件,坏处是代码会有写凌乱。

优化一, 采用官网推荐的 inline styles 方式, 而不是定义在 this.state 里,例如

var divStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
};

React.render(<div style={divStyle}>Hello World!</div>, mountNode);

第一次见到这样的代码,会有疑惑,为啥 background-image 被写成了 backgroundImage camelCased 式的命名方式. 实际上,使用 js 操作 DOM 元素的 style 都是采用 camelCased 的形式。可以在 chrome console 中做一个测试

var body = document.getElementsByTagName("body")[0];
console.log(body.style)

你会看到

...
overflow: ""
overflowWrap: ""
overflowX: ""
overflowY: ""
padding: ""
paddingBottom: ""
paddingLeft: ""
paddingRight: ""
paddingTop: ""
...

采用这种方式之后,只需要将会动态变化的 style 置于 this.state 中即可,其他的通用 style 只需要在 render 函数中定义。

CDN 的坑

由于将 js 文件放到了七牛 CDN 上,如果每次修改后,仍然保持原文件名,会出现 CDN 上的文件没有保持同步更新, 而且不确定多久会生效。所以最好的办法是,缀上 js 文件的版本号。

参考

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊, 查看更多联系方式。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。

相关文章

爱评论不评论