React开发：如何确定发布文章的函数应归属哪个组件？

问题描述 #

我刚开始学习React，尝试制作一个小型博客，部分组件结构如下：

--blog
  --Article
  --Button

现在要实现发布文章功能：需要从Article组件的textarea获取输入值，但触发发布的点击动作在Button组件中。我有两种实现思路：

1. 将发布函数放在Button组件中，因为它是实际触发动作的位置；
2. 将发布函数放在Blog组件中，因为Blog是两个子组件的公共父组件。

我查阅了Hook规则、组件分层与拆分的相关资料，也参考了一些项目示例，但不确定是否不该拆分Button组件，还是这只是个人编码风格的问题。

解答 #

推荐方案：将状态与处理函数放在父组件Blog中 #

这是最符合React单向数据流设计理念的做法，理由如下：

• 职责单一：Article只负责渲染输入框并同步输入值到父组件，Button只负责触发父组件传递的点击事件，两个组件都不耦合具体的发布业务逻辑，复用性更强。
• 避免组件耦合：如果把发布逻辑放在Button里，它需要跨组件获取Article的输入值，要么通过复杂的组件传参，要么引入状态管理工具，反而增加复杂度；而状态提升到父组件后，Article和Button只需要和父组件交互，逻辑更清晰。

简单代码示例 #

// Blog.jsx
import { useState } from 'react';
import Article from './Article';
import Button from './Button';

function Blog() {
  const [articleContent, setArticleContent] = useState('');

  const handlePublish = () => {
    // 这里写发布文章的逻辑，比如调用接口保存内容
    console.log('发布文章：', articleContent);
  };

  return (
    <div className="blog">
      <Article onContentChange={setArticleContent} />
      <Button onClick={handlePublish} text="发布文章" />
    </div>
  );
}

// Article.jsx
function Article({ onContentChange }) {
  return (
    <textarea
      onChange={(e) => onContentChange(e.target.value)}
      placeholder="写下你的文章..."
    />
  );
}

// Button.jsx
function Button({ onClick, text }) {
  return <button onClick={onClick}>{text}</button>;
}

关于Button组件拆分的疑问 #

完全可以拆分Button组件，这不仅是个人风格，更是组件职责划分的最佳实践：

• 拆分后的Button是通用组件，可以在博客的其他功能（比如删除文章、保存草稿）中复用；
• 如果不拆分，把发布逻辑和按钮UI耦合在一起，后续修改发布逻辑或按钮样式都会变得麻烦，也不符合React组件复用的思想。

总结：选择思路2（父组件管理状态和处理函数）是更合理的方案，拆分Button组件是值得推荐的做法，不是风格问题，而是符合React组件设计的基本原则。

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