react 怎么给标签加上的title属性

react 怎么给标签加上的title属性,第1张

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

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

render(){

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

}

用reactjs构建一个完整的前端页面的步骤:

准备:React 的安装包,建议去安装

1、使用 React 的网页源码,结构大致如下:

<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> // **用户代码 **</script> </body></html>

上面代码有两个地方需要注意。

首先,最后一个 <script>标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法,跟 JavaScript 不兼容。凡是使用 JSX 的地方,都要加上 type="text/babel" 。

其次,上面代码一共用了三个库: react.js 、react-dom.js 和 Browser.js ,它们必须首先加载。其中,react.js 是 React 的核心库,react-dom.js 是提供与 DOM 相关的功能,Browser.js 的作用是将 JSX 语法转为 JavaScript 语法,这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。

2、将 src 子目录的 js 文件进行语法转换,转码后的文件全部放在 build 子目录。

$ babel src --out-dir build

3、渲染转换成html节点,以方便 *** 作dom:

ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。

这里以插入hello world为例来说明

ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example'))

4、运行结果。


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

原文地址: http://outofmemory.cn/bake/11940088.html

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

发表评论

登录后才能评论

评论列表(0条)

保存