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

更新日期: 2015-12-12 阅读次数: 4943 分类: 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 聊聊。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

爱评论不评论

近期节日

2020年04月07日 世界卫生日
2020年04月11日 世界帕金森病日
2020年04月19日 谷雨
2020年04月21日 复活节
2020年04月22日 世界地球日
2020年04月23日 世界读书日
2020年04月26日 知识产权日
2020年04月30日 佛诞
2020年04月30日 全国交通安全反思日
2020年05月01日 国际劳动节
2020年05月04日 五四青年节
2020年05月05日 立夏
查看更多节日