如何从JSF页面访问React组件DocumentEditor的container变量

要在JSF页面中访问React组件DocumentEditor的container属性并赋值给后端Bean，可按以下步骤实现：

1. 给React组件暴露全局访问入口 #

在DocumentEditor组件或其容器组件中，将组件实例挂载到全局对象（如window），方便外部JS代码访问：

// 若为类组件的DocumentEditor
class DocumentEditor extends React.Component {
  componentDidMount() {
    // 将当前实例挂载到window
    window.documentEditorInstance = this;
  }

  // ...组件其他逻辑
}

// 若用容器组件管理，可通过ref获取实例
class DocumentEditorContainer extends React.Component {
  constructor(props) {
    super(props);
    this.editorRef = React.createRef();
  }

  componentDidMount() {
    window.getEditorInstance = () => this.editorRef.current;
  }

  render() {
    return <DocumentEditor ref={this.editorRef} />;
  }
}

2. 在JSF页面中通过保存按钮传递内容 #

通过JSF按钮的点击事件，获取React组件的container内容，再传递给后端Bean，有两种常见方式：

方式一：使用隐藏表单字段 #

<!-- JSF页面添加隐藏输入框，绑定Bean属性 -->
<h:inputHidden id="editorContent" value="#{yourBean.editorContent}" />

<!-- 保存按钮，点击时先赋值再提交 -->
<h:commandButton value="保存" onclick="setEditorContent(); return true;" action="#{yourBean.save}" />

<script>
function setEditorContent() {
  // 获取React组件实例及container内容
  const editor = window.documentEditorInstance;
  const content = editor.container;
  
  // 将内容赋值给隐藏字段
  document.getElementById('formId:editorContent').value = content;
}
</script>

方式二：通过JSF AJAX直接传递 #

<h:commandButton value="保存" onclick="saveViaAjax(); return false;" />

<script>
function saveViaAjax() {
  const editor = window.documentEditorInstance;
  const content = editor.container;
  
  // 发起JSF AJAX请求，直接传递参数到Bean
  jsf.ajax.request(
    this,
    null,
    {
      execute: '@none',
      render: '@none',
      params: { 'yourBean.editorContent': content },
      listener: function(data) {
        if (data.status === 'success') {
          alert('保存完成');
        }
      }
    }
  );
}
</script>

3. 后端Bean接收内容 #

在对应的JSF Managed Bean中添加属性和处理方法：

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean(name = "yourBean")
@ViewScoped
public class YourBean {
    private String editorContent;

    public String getEditorContent() {
        return editorContent;
    }

    public void setEditorContent(String editorContent) {
        this.editorContent = editorContent;
    }

    public void save() {
        // 编写保存逻辑，比如将content存入数据库
        System.out.println("编辑器内容：" + editorContent);
    }
}

注意事项 #

• 确保React组件已完成挂载后再调用全局实例，避免出现undefined错误
• 若container是复杂对象，需先序列化为JSON字符串再传递，后端Bean再反序列化处理
• 函数组件可通过useRef钩子获取实例，再挂载到全局对象

内容的提问来源于stack exchange，提问作者Eduardo Roque