美文网首页
react 问题 更新。。。。

react 问题 更新。。。。

作者: AlisaMfz | 来源:发表于2018-01-19 16:00 被阅读41次

    刚接触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();

    相关文章

      网友评论

          本文标题:react 问题 更新。。。。

          本文链接:https://www.haomeiwen.com/subject/troooxtx.html