ReactJS中自定义按钮点击跳转外部网站失效问题求助

问题根源在于你自定义的PageButton组件没有接收并绑定父组件传递的onClick事件属性。父组件虽然传了点击回调，但子组件的DOM元素没有关联这个事件，所以点击时不会执行openInNewTab函数。

修改方案 #

更新PageButton组件，将父组件传入的onClick绑定到可点击的DOM元素上（比如外层的div）：

import React from "react";

const PageButton = (props) => {
  return (
    <div 
      className="btn" 
      onClick={props.onClick}
      // 可选：添加鼠标样式提示可点击
      style={{ cursor: 'pointer' }}
    >
      <span className={props.isBold ? "pageButtonBold hoverBold" : "hoverBold"}>
        {props.name}
      </span>
    </div>
  );
};

export default PageButton;

补充说明 #

• 如果希望仅点击span区域才触发事件，也可以把onClick={props.onClick}绑定到span标签上。
• 浏览器可能会拦截window.open的弹窗，测试时请确保浏览器允许当前站点的弹窗请求。

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