Vue嵌套组件中，如何让<best-answer-button>向对应<question>触发事件？

当然有顺畅的实现方式！我结合最常见的React场景给你拆解下核心思路，保证精准控制只影响目标<question>及其下属组件，完全不会干扰其他提问模块：

1. 把最佳答案状态托管到<question>组件 #

既然<question>是所有下属<answer>的共同父节点，把**当前最佳答案的唯一标识（比如ID）**存在<question>的状态里是最合理的方案。这样所有相关组件的状态都由这个父组件统一管控，天然隔离了不同<question>之间的影响——每个<question>只关心自己的下属，完全不会碰其他提问模块的数据。

2. 组件通信的具体步骤 #

咱们一步步捋清楚逻辑：

• 首先在<question>里定义状态和回调：

  const Question = ({ questionId, answers }) => {
    // 存储当前最佳答案的ID，初始为null表示未选择
    const [bestAnswerId, setBestAnswerId] = useState(null);
  
    // 切换最佳答案的回调：如果当前ID已选中就取消，否则设为新ID
    const handleToggleBest = (answerId) => {
      setBestAnswerId(prev => prev === answerId ? null : answerId);
      // 这里可以直接给当前<question>添加/移除"最佳答案"标签，比如操作className
    };
  
    return (
      <div className={`question ${bestAnswerId ? 'has-best-answer' : ''}`}>
        {/* 渲染提问内容 */}
        {/* 遍历渲染下属的<answer>，传递关键props */}
        {answers.map(answer => (
          <Answer
            key={answer.id}
            answerId={answer.id}
            content={answer.content}
            isBest={answer.id === bestAnswerId}
            onToggleBest={handleToggleBest}
          />
        ))}
      </div>
    );
  };
  

• 然后是<answer>组件，它只需要接收props，把回调传递给内部的<best-answer-button>，同时根据isBest调整自身UI：

  const Answer = ({ answerId, content, isBest, onToggleBest }) => {
    return (
      <div className={`answer ${isBest ? 'marked-as-best' : ''}`}>
        {content}
        <BestAnswerButton
          onClick={() => onToggleBest(answerId)}
          isActive={isBest}
        />
      </div>
    );
  };
  

• 最后是<best-answer-button>，它的逻辑最简单：点击时调用传递过来的回调即可：

  const BestAnswerButton = ({ onClick, isActive }) => {
    return (
      <button 
        className={`best-btn ${isActive ? 'active' : ''}`}
        onClick={onClick}
      >
        {isActive ? '取消最佳答案' : '设为最佳答案'}
      </button>
    );
  };
  

3. 可选优化：减少不必要的重渲染 #

如果你的<answer>组件比较复杂，可以用React.memo包裹它，避免状态变化时所有<answer>都重渲染：

const Answer = React.memo(({ answerId, content, isBest, onToggleBest }) => {
  // 组件内容同上
}, (prevProps, nextProps) => {
  // 只有当isBest或onToggleBest变化时才重渲染
  return prevProps.isBest === nextProps.isBest && prevProps.onToggleBest === nextProps.onToggleBest;
});

其他框架的适配思路 #

如果是Vue的话，逻辑完全相通：

• 把最佳答案ID存在<question>组件的data里
• 通过$emit让<best-answer-button>触发<answer>的事件，再由<answer>向上emit到<question>
• <question>更新状态后，通过props或者provide/inject把状态传递给所有下属<answer>

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