如何在isPlayerTurn为false时禁用RowContainer组件的点击事件？

问题说明 #

我想在isPlayerTurn为false时，禁用自定义RowContainer组件的点击功能。尝试用三元运算符设置style属性：

<RowContainer style={isPlayerTurn ? {pointer-events: 'auto'} : {pointerEvents: 'none'}}>

但VSCode提示“',' expected”错误，而且不管用pointer-events还是pointerEvents，用户依然能点击组件，功能没生效。

补充信息：

• RowContainer是基于styled-components创建的组件：

import styled from "styled-components";
const RowContainer = styled.div`
  width: 100%;
  display: flex;
  justify-content: center;
`;

• 它内部包裹了带onClick事件的Cell组件，使用代码如下：

<RowContainer style={isPlayerTurn ? {pointerEvents: 'auto'} : pointerEvents: 'none'}>
  {row.map((column, columnIdx) => (
    <Cell 
      className={styles.cell} 
      borderRight={columnIdx < 2} 
      borderLeft={columnIdx > 0} 
      borderBottom={rowIdx < 2} 
      borderTop={rowIdx > 0} 
      onClick={() => updateGameMatrix(columnIdx, rowIdx, playerSymbol)}
    >
      {column && column !== "" ? (column === "x" ? (<X />) : (<O />)) : null}
    </Cell>
  ))}
</RowContainer>

问题原因 #

1. 语法错误：三元运算符的第二个分支pointerEvents: 'none'未包裹在对象大括号中，导致语法不合法，这是VSCode报错的直接原因。
2. 点击未禁用的核心原因：RowContainer的pointer-events设置仅作用于自身，而内部Cell组件独立绑定了onClick事件，父元素的pointer-events: none不会自动阻止子元素的点击行为，除非子元素明确继承该属性。

解决方案 #

方案一：直接控制Cell的点击事件（最可靠） #

在非玩家回合时，不给Cell绑定点击事件，从根源上移除触发逻辑：

<RowContainer>
  {row.map((column, columnIdx) => (
    <Cell 
      className={styles.cell} 
      borderRight={columnIdx < 2} 
      borderLeft={columnIdx > 0} 
      borderBottom={rowIdx < 2} 
      borderTop={rowIdx > 0} 
      onClick={isPlayerTurn ? () => updateGameMatrix(columnIdx, rowIdx, playerSymbol) : undefined}
    >
      {column && column !== "" ? (column === "x" ? (<X />) : (<O />)) : null}
    </Cell>
  ))}
</RowContainer>

方案二：用styled-components的props控制全局pointer-events #

通过给RowContainer传递props来控制样式，同时确保子元素继承点击权限：

1. 重写RowContainer定义：

import styled from "styled-components";
const RowContainer = styled.div`
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: ${props => props.isClickable ? 'auto' : 'none'};
`;

2. 使用时传递控制props：

<RowContainer isClickable={isPlayerTurn}>
  {row.map((column, columnIdx) => (
    <Cell 
      className={styles.cell} 
      borderRight={columnIdx < 2} 
      borderLeft={columnIdx > 0} 
      borderBottom={rowIdx < 2} 
      borderTop={rowIdx > 0} 
      onClick={() => updateGameMatrix(columnIdx, rowIdx, playerSymbol)}
    >
      {column && column !== "" ? (column === "x" ? (<X />) : (<O />)) : null}
    </Cell>
  ))}
</RowContainer>

注意：如果Cell的样式手动设置了pointer-events: auto，需改为pointer-events: inherit才能生效。

方案三：修复原style语法并确保子元素继承 #

先修正原代码的语法错误（统一使用React style要求的驼峰式pointerEvents，且两个分支均包裹在对象中）：

<RowContainer style={isPlayerTurn ? {pointerEvents: 'auto'} : {pointerEvents: 'none'}}>

然后给Cell的样式添加pointer-events: inherit;，让它继承父元素的点击权限设置。

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