本教程操作环境:windows10系统、React18.0.0版、Dell G3电脑。react创建元素的方法是什么?创建 react 元素React 元素React 元素(React element),它是 React 中最小的基本单位。
本教程操作环境:windows10系统、React18.0.0版、Dell G3电脑。
react创建元素的方法是什么?
创建 react 元素
React 元素(React element),它是 React 中最小的基本单位。React 元素其实就是一个简单的 javascript 对象(俗称:虚拟DOM),一个 React 元素对应界面上的一部分 DOM,描述了这部分 DOM 的结构及渲染效果。
React 元素不是真实的 DOM 元素,所以没办法直接调用 DOM 上的原生 api。
渲染过程:React 元素 描述 虚拟DOM ,再根据 虚拟DOM 渲染出真实的DOM。
总的来说:
元素就是用来描述 DOM 节点或者 React 组件的纯对象。元素可以在自己的属性中包含其它元素。创建一个元素的成本很低,一旦元素被创建之后,就不再发生变化。
例如:我们使用 JSX 语法创建一个 React 元素 element
const element = <h1 className='greeting'>Hello, world</h1>;
在编译过程中,JSX 会被编译成对 React.createElement() 的调用,上面的例子编译后的结果为:
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
最终,element 的值会被编译为类似下面的 js 对象
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
},
_context: Object,
_owner: null,
key: null,
ref: null,
}
const element = <h1>Hello, world</h1>;
语法参数说明
type:表示元素的类型,比如:h1、div、p等等。可以是
字符串(如div、p、h1…)
组件(自定义组件
:构造函数创建的组件或class创建的组件;react 原生组件
:React.Fragment等)
props:表示该元素上的属性,使用 JavaScript 对象的方式表示
children:表示该元素内部的内容,可以是文字,也可以继续嵌套另一个React.createElement(type,props,children)
。
其中 children 可以是一个 React.createElement 列表
,也可以写成多个参数:
<script type="text/babel">
const child1 = React.createElement("li",null,"one");
const child2 = React.createElement("li",null,"two");
const content = React.createElement("ul",{className:"testStyle"},[child1,child2]);
ReactDOM.render(
content,
document.getElementById("example")
);
//或者
const child1 = React.createElement("li",null,"one");
const child2 = React.createElement("li",null,"two");
const content = React.createElement("ul",{className:"testStyle"},child1,child2);
ReactDOM.render(
content,
document.getElementById("example")
);
</script>
const div = React.createElement('div', { id: 'box'}, 'test');console.log(div)
以上就是react创建元素的方法是什么的详细内容,更多请关注编程网其它相关文章!
--结束END--
本文标题: react创建元素的方法是什么
本文链接: https://www.lsjlt.com/news/206644.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-24
2023-05-24
2023-05-24
2023-05-24
2023-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0