如何通过自定义组件传参动态渲染react-native-pell-rich-editor的HTML

react-native-pell-rich-editor的initialContentHTML确实仅在组件挂载阶段生效，要实现通过props动态渲染HTML内容，你可以利用组件实例的setContentHTML方法，结合useEffect监听props变化来触发更新，无需替换现有组件。

修改后的组件代码 #

import { useEffect, useState } from 'react';
const CheckboxDetails = (props) => {
  const {
    currentIndex = 0,
    onChangeRichText,
    richTextRef,
    initialContentHTML,
    disabled,
  } = props;
  
  // 标记编辑器是否初始化完成
  const [editorReady, setEditorReady] = useState(false);

  const editorInitializedCallback = () => {
    setEditorReady(true);
  };

  // 监听initialContentHTML变化，动态更新编辑器内容
  useEffect(() => {
    if (editorReady && richTextRef.current[currentIndex]) {
      richTextRef.current[currentIndex].setContentHTML(initialContentHTML);
    }
  }, [initialContentHTML, editorReady, currentIndex, richTextRef]);

  return (
    <RichEditor
      ref={(el) => { richTextRef.current[currentIndex] = el; }}
      useContainer={false}
      containerStyle={{ minHeight: height }}
      onChange={onChangeRichText}
      editorInitializedCallback={editorInitializedCallback}
      initialContentHTML={initialContentHTML}                    
      disabled={disabled}
    />
  );
}

export default CheckboxDetails

核心逻辑说明 #

• 用editorInitializedCallback标记编辑器初始化状态，避免在编辑器未就绪时调用方法报错
• 通过useEffect监听initialContentHTML的变化，当props传入的内容更新时，通过ref获取当前编辑器实例，调用setContentHTML方法更新内容
• 同时监听currentIndex和richTextRef，确保操作的是当前索引对应的编辑器实例

内容的提问来源于stack exchange，提问作者Gavin Canete