点击React Bootstrap手风琴时如何修改Header的HTML内容？

你的问题核心是直接将HTML字符串赋值给toggleText，React会把这类字符串原样渲染成纯文本，不会解析其中的HTML标签和实体。只需改用JSX语法直接构建元素即可解决。

修改方案 #

将toggleText从字符串形式改为JSX元素，去掉引号包裹，直接编写<h3>标签；箭头符号可以保留HTML实体（React会自动解析），或者直接使用对应的Unicode字符：

function ContextAwareToggle({ children, eventKey, callback }) {
  const currentEventKey = useContext(AccordionContext);

  const decoratedOnClick = useAccordionToggle(
    eventKey,
    () => callback && callback(eventKey),
  );

  const isCurrentEventKey = currentEventKey === eventKey;

  // 改用JSX元素替代字符串
  const toggleText = isCurrentEventKey ? 
    <h3>Up arrow &#5169;</h3> : 
    <h3>Down arrow &#5167;</h3>;

  return (
    <Accordion.Toggle
      as={Card.Header}
      style={{ backgroundColor: isCurrentEventKey ? '#87CEEB' : '#00BFFF' }}
      onClick={decoratedOnClick}
    >
      {toggleText}
    </Accordion.Toggle>
  );
}

补充说明 #

• React的JSX语法会把<h3>这类标签解析为真实的DOM元素，而非纯文本
• HTML实体（如ᐯ）会被自动转换为对应的Unicode字符显示，你也可以直接写字符简化代码：

  const toggleText = isCurrentEventKey ? 
    <h3>Up arrow ↓</h3> : 
    <h3>Down arrow ↑</h3>;
  

修改后，头部的<h3>标签会被正确渲染，箭头符号也能正常显示。

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