传递HTMLAnchorElement至React函数时出现脚本错误求助

开发者阿泽

2026-7-12

问题分析与解决

脚本错误的原因

语法错误：CustomAnchor函数的return语句末尾多了一个冗余单引号，这会直接导致JS语法解析失败，是最直接的报错原因。
概念错误：你通过JSX创建的<a>Click me</a>是React元素对象，并非真实的HTMLAnchorElement DOM节点。React元素本质是描述DOM结构的JavaScript对象，是不可变的，直接修改它的href、target属性既不会生效，也不符合React的工作机制。

正确实现方式

方案一：封装成React组件（推荐，符合React声明式思想）

把自定义锚点逻辑封装成独立组件，通过props传递内容，直接渲染带属性的a标签：

function CustomAnchor({ children }) {
  return <a href="https://example.com" target="_blank">{children}</a>;
}

// 用法
const MyComponent = () => {
  return (
    <div>
      <CustomAnchor>Click me</CustomAnchor>
    </div>
  );
};

ReactDOM.render(<MyComponent />, document.querySelector('#id1'));

方案二：操作真实DOM节点（适用于复杂DOM操作场景）

如果确实需要直接操作HTMLAnchorElement，可以通过useRef钩子获取真实DOM节点，在组件挂载后进行修改：

const MyComponent = () => {
  const anchorRef = React.useRef(null);

  React.useEffect(() => {
    // 组件挂载后获取真实DOM节点
    if (anchorRef.current) {
      const realAnchor = anchorRef.current;
      realAnchor.href = 'https://example.com';
      realAnchor.target = '_blank';
    }
  }, []);

  return (
    <div>
      <a ref={anchorRef}>Click me</a>
    </div>
  );
};

ReactDOM.render(<MyComponent />, document.querySelector('#id1'));