您的位置: 首页  >  IT文章  >  React基础知识笔记：如何渲染html代码、条件渲染与循环渲染、如何获取动态路由传参、动态设置背景图、umi+dva中全局使用dispatch

React基础知识笔记：如何渲染html代码、条件渲染与循环渲染、如何获取动态路由传参、动态设置背景图、umi+dva中全局使用dispatch

分类: IT文章 • 2022-05-30 17:02:32

1、react中如何渲染 html 代码

　　react的 dangerouslySetInnerHTML 可以解析并渲染 Html 代码。用法如下：

　　如果想让div元素中的内容： '<h3>hello world</h3>'正常渲染

<div dangerouslySetInnerHTML={{__html: '<h3>hahhah</h3>'}}></div>

　　注意 dangerouslySetInnerHTML 中必须是一个对象。更直观的例子如下：

function createMarkup() {
  return {__html: 'First &nbsp;&nbsp;&nbsp; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()}></div>;
}

2、条件渲染与循环渲染

    render() {
        return (
            <div>
                {/* 条件渲染 */}
                { this.props.title && <h1>{this.props.title}</h1> } {/* 短路逻辑 */}

                {/* 列表渲染 */}
                <ul>
                    {this.state.goods.map( good  => <li key={good.id}>{good.text}</li> )}
                </ul>
            </div>
        );
    }

3、如何获取动态路由传参

componentDidMount() {
    console.log(this.props)
    param.subjectId = (this.props as any).match.params.id
}

React基础知识笔记：如何渲染html代码、条件渲染与循环渲染、如何获取动态路由传参、动态设置背景图、umi+dva中全局使用dispatch

　　如上图就是 this.props 里面的东西，可以从 match 里面取到动态路由传参。

4、动态设置背景图

<div className="course-img" style={'background-image': `url(${record.courseLogo})`}></div>
// Vue里这样写即可，但是React不支持，只能按下面这样2种写法

<div className="course-img" style={this.getImgUrl(record.courseLogo)}></div>

getImgUrl = img => {
    return {
　　　　'backgroundImage':`url(${img})`
    }
}
<div className="course-img" style={{'backgroundImage':`url(${record.courseLogo})`}}></div>
// 还有就是这样写，注意到React里的变量必须用到{}，所以这个style={}，里面若需要用到变量，就还是需要使用{}包裹一下才行

5、全局使用dispatch

　　情况：组件抽离了一些方法写在了组件外部，当页面有操作时，需要在外部dispatch一些数据，由于不是在hooks文件中，所以不能使用useDispatch。现使用如下方式解决问题：

import { getDvaApp } from 'umi';
// 退出登录
loginOut = () => {
    sessionStorage.setItem('admintoken', '');
    let _store = getDvaApp()._store;
    _store.dispatch({
      type: 'common/setUserName',
      payload: { userInfo: {} },
    });
    history.push('/');
};

相关推荐