我正在学习Reaction，我正在编辑一个Tic Tac Toe游戏的教程。当有赢家时，赢家线应该突出显示。我将一个line道具一直传递到Square组件，并编写了以下代码：

function Square(props) {
    props.line ? 
       return (
          <button className="square" onClick={props.onClick} style={{backgroundColor: "red"}}>
            {props.value}
          </button>
       );
    :
       return (
          <button className="square" onClick={props.onClick}>
            {props.value}
          </button>
       );
}

首先，一开始return有一个语法错误，但每当我尝试修复它时，我都只是创建一个新的错误，显然我不知道如何在return中处理JavaScript，那么即使我想要的是一个正确的语法，它可能仍然只会改变特定Square的颜色，而不是整个props.line。