react开发中遇到的问题 - 应用react.js

 

问题1：

　　问题说明：

　　

　　

		render: function () {
			return 
				<div>
					<table>
						<tr>
							<td colspan="8" className="textCenter th">
								<div className="flex1">
									<div>
										<p>xx支行x月服务评审会纪要</p>
									</div>
								</div>
							</td>
						</tr>
					</table>
				</div>
		}
	})

　　

　　解决说明：render return 后面不能没有东西，改成：

render: function () {
			return <div>
					<table>
						<tr>
							<td colspan="8" className="textCenter th">
								<div className="flex1">
									<div>
										<p>xx支行x月服务评审会纪要</p>
									</div>
								</div>
							</td>
						</tr>
					</table>
				</div>
		}
	})

　　　即可。

 

 

问题2：

render: function () {
            return <div>
                    <table>
                        <tr>
                            <td colspan="8" className="textCenter th">
                                <div className="flex1">
                                    <div>
                                        <p>xx支行x月服务评审会纪要</p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
        }
    })

　　问题说明：我插入table的时候，给td使用colspan属性，没有效果

　　解决说明：react支持驼峰，即将clospan写成colSpan即可

 问题3：

　　问题描述:我在html文件中引用react.js,使用过程中想用Ant Design(密码：kuyy)，代码如下

　　

引用react.js
<script type="text/javascript" src="js/react/react.min.js"></script>
<script type="text/javascript" src="js/react/react-dom.min.js"></script>
<script type="text/javascript" src="js/react/babel.min.js"></script>

引用antd.js
<link rel="stylesheet" type="text/css" href="js/ant/antd.min.css">
<script type="text/javascript" src="js/ant/antd.min.js"></script>

使用antd
ReactDOM.render(
  <div>
    <antd.Button type="primary">Primary</antd.Button>
    <antd.Button>Default</antd.Button>
    <antd.Button type="dashed">Dashed</antd.Button>
    <antd.Button type="danger">Danger</antd.Button>
  </div>
, document.getElementById('message1'));

　　但是在使用的时候，页面报错：

　　

错误1：
antd.min.js:19 Uncaught TypeError: Da(...) is not a function
    at Object.<anonymous> (antd.min.js:19)
    at t (antd.min.js:9)
    at Object.<anonymous> (antd.min.js:35)
    at t (antd.min.js:9)
    at Object.<anonymous> (antd.min.js:35)
    at t (antd.min.js:9)
    at antd.min.js:9
    at antd.min.js:9
    at antd.min.js:9
    at antd.min.js:9

错误2：
 Uncaught ReferenceError: antd is not defined
    at <anonymous>:7:3
    at i (babel.min.js:24)
    at r (babel.min.js:24)
    at o (babel.min.js:24)
    at u (babel.min.js:24)
    at x (babel.min.js:1)

　　一直不知道怎么解决，甚至一度让我放弃。但是今早再一次看antd文档的时候发现了一句话：

　　

3.0 之后引入 antd.js 前你需要自行引入 moment。

　　那么，是不是就是这个moment.js的问题呢。我试着下载，并引入，发现，问题解决了！！！ -----看文档不认真惹的祸啊

 

 

问题4

　　开发过程中遇到堆栈溢出，报错如下：

　　

Uncaught RangeError: Maximum call stack size exceeded
    at Function.o [as getPooled] (react-dom.min.js:12)
    at T (react-dom.min.js:14)
    at o.close (react-dom.min.js:14)
    at o.closeAll (react-dom.min.js:15)
    at o.perform (react-dom.min.js:15)
    at o.perform (react-dom.min.js:14)
    at T (react-dom.min.js:14)
    at o.close (react-dom.min.js:14)
    at o.closeAll (react-dom.min.js:15)
    at o.perform (react-dom.min.js:15)

 经检测，问题出在render中使用了this.setState，那么是不是就不能在render中更新数据呢？待调查

 

问题5：

　　开发过程中我想给input限制长度，也就增加maxlength属性，于是我添加如下代码：

<input type="text" maxLength="10"/>

但是，页面刷新过程中，发现并不起作用，网上稍微百度了下，有了如下的解决办法：

<input type="text" maxLength={10}/>