React 下 Valine 的封装与使用

import React from 'react';

// 创建一个 config 对象，也可以直接导入一个配置文件
const config = {
    appId: 'xxxx',
    appKey: 'xxxx',
};

// 动态导入 Valine 并创建实例
const buildValine = async (options) => {
    const RealValine = await (await import('valine')).default;
    new RealValine(options);
};

// 这里只暴露了 path 参数传递给 Valine，其它配置可以根据需要修改代码
export default function Valine({path = '', ...others}) {
    // 创建一个 ref 对象，用于绑定 `div` 元素
    const ref = React.useRef(null);

    // useEffect 只会在客户端加载页面后进行，对服务端无效
    React.useEffect(() => {
        // 当 ref 对象存在，调用 buildValine
        if (ref.current) {
            buildValine({
                el: ref.current,
                path,
                ...config,
            });
        }
    }, [path, config, ref]);

    return <div ref={ref} {...others} />;
}

import Valine from './Valine';
<Valine path="/">