当前位置: 首页 > 文档资料 > Rax 中文文档 >

render

优质
小牛编辑
136浏览
2023-12-01

在提供的 container 里通过指定的 Driver 渲染一个 Rax 元素,并返回该根组件的实例。如果提供了可选的回调函数,该回调将在组件被渲染或更新之后被执行。
注意当首次调用 render 时,会将容器节点里的所有 DOM 元素都替换掉,后续调用时则进行高效更新处理。

方法

render(element, container, options, [callback])

参数

  • element 可以是任意需要渲染的 Rax 组件或字符串
  • container 为任意指定 DOM 渲染容器
  • options
  • hydrate:  指定是否开启 hydrate 渲染模式,默认为 false
  • callback 传入回调函数,将在组件被渲染或更新之后被执行

返回值

当调用该方法时,返回 Rax 元素实例。

示例

可指定对应端的 Driver,也可以指定面向多端项目的 Driver,旨在抹平 Web 与 Weex 的差异,渲染一个组件到根节点:

import { render } from 'rax';
import DriverUniversal from 'driver-universal';

const HelloMessage = function (props) {
	return <h1>{props.name}</h1>
};
render(<HelloMessage name="world" />, document.body, { driver: DriverUniversal })

参考

跨容器渲染