首页 » 前端 » 正文

React学习5-开发笔记

| 前端 | | 暂无评论 | 1140 views

记录学习过程中的方法或者问题

1、要在render中展示一个html内容

比如里面的空格，可以进行Unicode转码后再放到render中，但是这种方法还需要提供额外的接口处理内容，不方便。

1
2
var username='XXXXXXX'; //html内容
<p dangerouslySetInnerHTML={{__html: username}}></p>

这种方法其实“dangerous”，因为在JSX中安全。

 

2、当一个节点从父级获取到多个参数后，可能需要同时把所有的参数都传给自己的子节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*
第一级 Index
*/
<div>
   <Second uid='123' name='villen'/>
</div>
 
/*
第二级 Second
*/
<div>
   <Third uid='123' name='villen'/>
</div>
/*
第二级 Second 换一种写法
*/
<div>
   <Third {...this.props} />
</div>

 

3、获取dom并修改颜色

1
2
var _dom = document.getElementById('myId');
ReactDom.findDomNode(_dom).style.color='red'

上面这种方法相当于js原生的写法，下面可以使用react的方式

1
2
this.refs.myRef.style.color='red'
//dom上要有 ref='myRef'的属性

refs会自动销毁对子组建的引用，并且不要在render之前或过程中进行修改，另一方面，不要滥用refs

 

4、定义全局共享方法，使用mixin

1
2
3
4
5
6
7
8
9
const MixinLog = {
    componentDidMount() {  //同样可以定义生命周期
        console.log('all did');
    };
    log(){
        console.log('打点')
    }
}
export default MixinLog;

1
2
3
4
5
6
sudo npm install --save react-mixin@2
//在配置文件中自动生成配置，但是仍需要在js文件中引用
import ReactMixin from '/目录'
import MixinLog from '/目录'
ReactMixin(当前className.prototype, MixinLog) //在当前js中映射
MixLog.log() //使用方法

 

5、模块下载的技巧

node_modules文件夹中有很多依赖，放到共享或者git上都不太合适，所以package.json文件是一个很好的说明，它列出了所有文件需求，我们一开始使用的时候用“npm insall”它会帮我们自动生成，其实还有一个用法，如果我本身就有json文件，再运行，它会按照配置中的版本帮我们下载好对应的包，这样的话我就不用手动添加module去了。当然，如果你手动在json文件中添加了一些配置，再运行“npm insall”它会一一扫描，已经下载过的就跳过，没有的就下载。

 

6、css模块化

在webpack的配置文件中设置loader

1
2
test:/\..css?$/,
loader:'style!css-loader?modules&importLoaders=1&localIndentName=[name]__[local]__[hash:base64:5]'

写好css文件后(比如有footer{color:red})，在组件中require这个样式文件，定义为localCss，对元素的className设置为localCss.footer，这样footer的样式不影响其他组件的样式

 

7、getFieldProps和getFieldDecorator
这两个api都是为了获取antd-form的表单数据，前者应该已经在新版版中不再提倡了，在官方最新文档中很少提及，但是还是可以用，而后者相对有更多的功能，验证、默认值、重命名、消息等，由于之前在一些教程中看到这两个东西，一时有点晕，所以做了记录

1
2
3
4
5
6
//定义方式
const {getFieldProps} = this.props.form;
//表单的组件方式
<FormItem label="评论">
    <Input type="textarea" placeholder="输入评论" {...getFieldProps('remark',{initialValue:''})}/>
</FormItem>

1
2
3
4
5
6
7
8
9
10
//定义方式
const {getFieldDecorator} = this.props.form;
//表单的组件方式
<FormItem label='评论'>
     {getFieldDecorator('remark',
         {rules: [{ required: true, message: 'Please input your username!' }],
     })(
         <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.3)' }} />}
     )}
</FormItem>

多使用第二种方法

 

8、react-router 4中对路由的配置
热更新下的路由设置

1
2
3
4
5
module.exports = {  
    devServer: {
        historyApiFallback: true
    }
｝

一开始没太在意这个配置的用途，这里补充一下：
对于单页面程序，浏览器的brower histroy可以设置成html5 history api或者hash，而设置为html5 api的，如果刷新浏览器会出现404 not found，原因是它通过这个路径（比如： /activities/2/ques/2）来访问后台，所以会出现404，而把historyApiFallback设置为true那么所有的路径都执行index.html。

 

8、切换node版本

1
nvm use 6 //使用node版本6

 

9、npm报错

1
2
3
4
5
throw err;
^
 
Error: Cannot find module '../lib/utils/unsupported.js'
at Function.Module._resolveFilename (module.js:469:15)

解决办法：

1
2
sudo rm -rf /usr/local/lib/node_modules/npm
brew reinstall node

持续更新 . . .