刚接触react 还不太熟,碰到了一些问题,记录下
子组件与父组件之间的通讯:
在网站设计中,网站头部可以共用,所以说 就把头部做成了公共组件,有需要的页面只需要把组件引入页面内就可以了,而在子组件中需要获取个人信息,只要在子组件请求完成后,才能加载父组件中的内容:
采用下面写法
在子组件中
getMemberInfo = ()=> {
Api.call(apis.detail.getMemberInfo).then(json=> {
if(!json.code){//获取数据,复制操作
}).finally(()=> {//请求完成,发消息给父组件
this.props.hasloaded &&this.props.hasloaded()
})};
在父组件中 首先要把子组件引进来 jsx中
import CHeadfrom "../../component/CHead.jsx";
<Chead hasloaded ={this.hasloaded} />
判断子组件是否已经发了信息
hasloaded = ()=> {
this.setState({
cHeadLoaded:true//控制父组件中是否展示内容
}, ()=> {
//父组件中的数据请求
});};
当组件传入的 props 发生变化时调用,例如:父组件状态改变,给子组件传入了新的prop值。用于组件 props 变化后,更新state。
componentWillReceiveProps(nextProps)
{Logger.info('检测 props 属性的改变', nextProps);}
基于react的滚动加载组件
例子地址: 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>,也可以直接插入文字
}}
清空from表单中的数据
this.props.form.resetFields();