跳到主要内容

createElement

一、认识​

React.createElement() 用于创建虚拟DOM。创建并返回指定类型的新 React 元素。它可以作为 JSX 的替代方案。

二、语法​

const vnode = React.createElement(type,props,...children);

  • type: type 参数必须是一个有效的 React 组件类型，例如一个字符串标签名（如 div 或 span），或一个 React 组件（一个函数式组件、一个类式组件，或者是一个特殊的组件如 Fragment）。

  • props: props 参数必须是一个对象或 null。如果你传入 null，它会被当作一个空对象。创建的 React 元素的 props 与这个参数相同。注意，props 对象中的 ref 和 key 比较特殊，它们 不会 作为 element.props.ref 和 element.props.key 出现在创建的元素 element 上，而是作为 element.ref 和 element.key 出现。

  • ...children: 可选, 零个或多个子节点。它们可以是任何 React 节点，包括 React 元素、字符串、数字、portal、空节点（null、undefined、true 和 false），以及 React 节点数组。

三、用法​

3.1 React.createElement element​

const elementVNode = React.createElement('div',{ className: '', id: '' }, []);

3.2 React.createElement component​

const Component = ()=>{

  useEffect(()=>{
    console.log("Component");
  },[]);

  return React.createElement('div',{ className: '',id: ''}, []);
}

const elementVNode = React.createElement(Component,{  }, []);

React.createElement(Component,{},...children) 等效于在 JSX 中的 <Component />