剛接觸react 還不太熟寺鸥,碰到了一些問(wèn)題猪钮,記錄下
子組件與父組件之間的通訊:
在網(wǎng)站設(shè)計(jì)中,網(wǎng)站頭部可以共用胆建,所以說(shuō) 就把頭部做成了公共組件烤低,有需要的頁(yè)面只需要把組件引入頁(yè)面內(nèi)就可以了,而在子組件中需要獲取個(gè)人信息笆载,只要在子組件請(qǐng)求完成后扑馁,才能加載父組件中的內(nèi)容:
采用下面寫法?
在子組件中
getMemberInfo = ()=> {
Api.call(apis.detail.getMemberInfo).then(json=> {
if(!json.code){//獲取數(shù)據(jù),復(fù)制操作
}).finally(()=> {//請(qǐng)求完成凉驻,發(fā)消息給父組件
this.props.hasloaded &&this.props.hasloaded()
})};
在父組件中? 首先要把子組件引進(jìn)來(lái)?jsx中? ??
?import CHeadfrom "../../component/CHead.jsx";
?<Chead hasloaded ={this.hasloaded} />
判斷子組件是否已經(jīng)發(fā)了信息
hasloaded = ()=> {
? ? this.setState({
? ? ? ?cHeadLoaded:true//控制父組件中是否展示內(nèi)容
}, ()=> {
? ? ? //父組件中的數(shù)據(jù)請(qǐng)求
? ? });};
當(dāng)組件傳入的 props 發(fā)生變化時(shí)調(diào)用腻要,例如:父組件狀態(tài)改變,給子組件傳入了新的prop值涝登。用于組件 props 變化后雄家,更新state。
componentWillReceiveProps(nextProps)?
{Logger.info('檢測(cè) props 屬性的改變'胀滚, nextProps);}
基于react的滾動(dòng)加載組件?
例子地址: https://www.quduopai.cn/
demo:https://pan.baidu.com/s/1dpazka
react中form.create()
在jsx中用form??
寫法
class PwdLoginextends Page{}
const WrappedPwdLogin = Form.create()(PwdLogin);
export default WrappedPwdLogin;//輸出類? export default 用法
參考鏈接 :http://es6.ruanyifeng.com/#docs/module#export-default-??
在父組件中趟济,引入子組件乱投,import PwdLoginfrom './PwdLogin.jsx';
父組件寫法 :class NormalLoginFormextends React.Component{}
const WrappedNormalLoginForm = Form.create()(NormalLoginForm);
ReactDOM.render(, document.querySelector("#root"));
<div dangerouslySetInnerHTML={{
__html://html代碼<span style=‘color:red’>ddddd</span>,也可以直接插入文字
}}
清空f(shuō)rom表單中的數(shù)據(jù)
this.props.form.resetFields();