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

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

组件源码地址 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 文件的版本号。

参考

• Animated Scroll to Top
  

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式