React新手求助：Rails集成场景下非关联组件的状态共享问题

嘿，刚学两天React就能想到状态提升、Redux这些思路，已经很厉害了！针对你这种在Rails里分散渲染React组件的场景，我给你梳理几个实用的方案，从易到难，你可以根据自己的情况来选：

这个方案完全不用动现有Rails生成的HTML，只需要给两个组件加几行代码就行。核心思路是：CommentForm提交成功后，在全局触发一个自定义事件；Comments组件监听这个事件，收到新评论数据后更新自己的状态。

示例代码：

// CommentForm 组件（提交逻辑里）
const handleSubmit = async (e) => {
  e.preventDefault();
  // 这里是提交到后端的逻辑，假设成功后拿到新评论数据
  const newComment = await saveComment(formData);
  
  // 触发自定义事件
  window.dispatchEvent(new CustomEvent('commentAdded', { detail: newComment }));
};

// Comments 组件（类组件示例）
class Comments extends React.Component {
  componentDidMount() {
    // 监听事件
    window.addEventListener('commentAdded', this.handleNewComment);
  }

  componentWillUnmount() {
    // 记得卸载时移除监听，避免内存泄漏
    window.removeEventListener('commentAdded', this.handleNewComment);
  }

  handleNewComment = (e) => {
    // 更新本地状态
    this.setState(prevState => ({
      comments: [...prevState.comments, e.detail]
    }));
  }

  render() {
    // 渲染评论列表
    return (
      <div className="comments-list">
        {this.state.comments.map(comment => (
          <div key={comment.id} className="comment">{comment.content}</div>
        ))}
      </div>
    );
  }
}

如果是函数组件，用useEffect来监听和移除监听就行，逻辑是一样的。

这个方案比自定义事件更"React友好"一点，把状态更新的逻辑集中到一个小工具里，避免全局事件的零散感。你可以自己写一个极简的Pub/Sub工具，也可以用现成的轻量库。

自己写的示例：

// 新建一个 commentStore.js 文件
const commentStore = {
  subscribers: [],
  // 订阅事件
  subscribe(callback) {
    this.subscribers.push(callback);
    // 返回取消订阅的函数
    return () => {
      this.subscribers = this.subscribers.filter(cb => cb !== callback);
    };
  },
  // 发布事件
  publish(newComment) {
    this.subscribers.forEach(callback => callback(newComment));
  }
};

export default commentStore;

然后在组件里使用：

// CommentForm 组件
import commentStore from './commentStore';

const handleSubmit = async (e) => {
  e.preventDefault();
  const newComment = await saveComment(formData);
  // 发布新评论
  commentStore.publish(newComment);
};

// Comments 组件（函数组件示例）
import { useEffect, useState } from 'react';
import commentStore from './commentStore';

function Comments() {
  const [comments, setComments] = useState([]);

  useEffect(() => {
    // 订阅事件
    const unsubscribe = commentStore.subscribe(newComment => {
      setComments(prev => [...prev, newComment]);
    });

    // 组件卸载时取消订阅
    return unsubscribe;
  }, []);

  return (
    <div className="comments-list">
      {comments.map(comment => (
        <div key={comment.id} className="comment">{comment.content}</div>
      ))}
    </div>
  );
}

如果想完全遵循React的状态管理思路，同时保留Rails生成的中间HTML，可以用Context来共享状态，再用Portal把两个组件渲染到页面的不同位置。

步骤如下：

1. 创建一个共享评论状态的Context

// CommentContext.js
import { createContext, useState, useContext } from 'react';

const CommentContext = createContext();

// 提供状态的Provider组件
export function CommentProvider({ children }) {
  const [comments, setComments] = useState([]);

  const addComment = (newComment) => {
    setComments(prev => [...prev, newComment]);
  };

  return (
    <CommentContext.Provider value={{ comments, addComment }}>
      {children}
    </CommentContext.Provider>
  );
}

// 自定义Hook，方便组件使用Context
export function useCommentContext() {
  return useContext(CommentContext);
}

2. 创建根组件，用Portal把两个组件渲染到指定DOM节点

// AppRoot.js
import { CommentProvider } from './CommentContext';
import CommentForm from './CommentForm';
import Comments from './Comments';
import { createPortal } from 'react-dom';

export default function AppRoot() {
  // 获取页面上预先留好的容器节点
  const formContainer = document.getElementById('comment-form-container');
  const commentsContainer = document.getElementById('comments-container');

  return (
    <CommentProvider>
      {/* 用Portal把CommentForm渲染到页面顶部的容器 */}
      {formContainer && createPortal(<CommentForm />, formContainer)}
      {/* 用Portal把Comments渲染到页面底部的容器 */}
      {commentsContainer && createPortal(<Comments />, commentsContainer)}
    </CommentProvider>
  );
}

3. 修改Rails视图，替换原来的两个react_component调用

<!-- Rails视图 -->
<!-- 给CommentForm留的容器 -->
<div id="comment-form-container"></div>

<!-- 中间原来的Rails生成的HTML，完全保留 -->
<div class="rails-generated-content">
  <!-- 各种Rails助手生成的内容 -->
</div>

<!-- 给Comments留的容器 -->
<div id="comments-container"></div>

<!-- 只需要渲染根组件 -->
<%= react_component('AppRoot') %>

4. 在两个子组件里使用Context

// CommentForm组件
import { useCommentContext } from './CommentContext';

function CommentForm() {
  const { addComment } = useCommentContext();

  const handleSubmit = async (e) => {
    e.preventDefault();
    const newComment = await saveComment(formData);
    // 调用Context里的addComment方法
    addComment(newComment);
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 表单内容 */}
    </form>
  );
}

// Comments组件
import { useCommentContext } from './CommentContext';

function Comments() {
  const { comments } = useCommentContext();

  return (
    <div className="comments-list">
      {comments.map(comment => (
        <div key={comment.id} className="comment">{comment.content}</div>
      ))}
    </div>
  );
}

这个方案是最符合React设计理念的，而且后续如果有更多组件需要共享评论状态，扩展起来非常方便。

Redux是React生态里最流行的全局状态管理库，但对于你现在的小场景来说，有点"杀鸡用牛刀"的感觉——它需要配置store、reducers、actions等，学习成本相对高一些。如果你的项目以后会扩展成大型应用，需要多个组件共享复杂状态，再考虑引入Redux也不迟。

总结一下：

• 只想快速解决问题，选方案1或方案2，改动最小，上手最快；
• 想遵循React最佳实践，且考虑长期扩展，选方案3；
• Redux可以先放一放，等你对React更熟悉后再尝试。

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