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}/>