vue中render a标签如何添加target

vue中render a标签如何添加target,第1张

一般render函数里面一定会调用createElement

方法,一般都是用改方法来创建VNode。此方法包含三个参数:

第一个参数:可以使一个HTML标签字符串,组件选项对象,或者是一个解释上述任一的async异步函数。必需参数;

第二个参数:

包含模板相关属性的数据对象。可选参数;

第三个参数:自虚拟节点。由

`createElement()`

构建而成,也可以使用字符串。可选参数

回归问题:让a标签添加target属性,是相关的数据对象,所以需要传入第二个参数。

render: function (createElement) {

return createElement(

'a',

{

'class': {},

style: {

color: 'orange'

},

// 普通的 HTML 特性

attrs: {

target: '_blank'

}

}

)

}

在react 16版本已经可以支持给标签添加自定义属性。

react 15和之前的版本不支持,但是可以通过ref的形式解决。如下。

render(){

return <div ref={ele =>ele.setAttribute('title', 'data')}></div>

}

执行:组件加载钱最先调用一次,仅调用一次。

作用:定义状态机变量。

注意:第一个语句必须为super(), 否则会报错:'this' is not allowed before super()

执行:组件初始渲染(render()被调用前)前调用,仅调用一次。

作用:如果这个函数调用的setState改变了组件的某些状态,react会等待setState完成后再渲染组件。

注意:子组件也有componentWillMount函数,在父组件的该函数调用后再调用。

执行:componentWillMount调用之后, componentDidMount调用之前。

作用:渲染挂载组件。

触发:1、初始化加载页面,2、状态机改变setState,3、接收新的props(父组件更新)

注意:组件必要函数,不能在函数内使用setState改变状态机。

时间:render之后被调用,仅调用一次。

作用:渲染挂载组件,可以使用refs(react支持的一个特殊属性,可以将它加在render函数返回的组件元素上,起一个标记作用,方便定位。)

注意:子组件也有该函数,在父组件调用前调用;如果该函数内有setState改变状态机,将会重新渲染组件,如果需要在页面初始化之后才改变状态机的,可以将网络请求放在该函数内。

时间:组件渲染后,当组件接收新的nextProps时被调用。函数接收一个新的nextProps对象,nextProps是父组件传给子组件的。父组件render之后就会被调用。

作用:渲染挂载组件,可以使用refs(react支持的一个特殊属性,可以将它加在render函数返回的组件元素上,起一个标记作用,方便定位。)

注意:react初次渲染时不会被调用。

时间:组件执行render函数之后,接收新的props或state时被调用,即每次执行setState都会执行该函数,来判断是否重新渲染组件,默认返回true,接收两个参数。

作用:如果有些变化不需要执行渲染组件,可在该函数内阻止。

注意:不能在该函数内使用setState来改变状态机,如需要,请在componentWillReciveProps中改变。

时间:组件重新渲染后调用,在初始化渲染的时候该方法不会被调用。

作用:使用该方法可以在组件更新之后 *** 作DOM元素。

时间:组件卸载之前调用。

作用:在该方法中执行必要的清理,比如无效的定时器后者在componentDidMount中创建的DOM元素。

注意

当一个页面中存在父子组件的时候,要特别注意componentDidMount的使用,因为子组件的componentDidMount会比父组件先调用,从而会引起父子组件传参错误。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11704360.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存