如何使用React函数组件实现掷骰子功能，返回Snake Eyes或对应点数

• 随机数范围不符合要求：当前Math.floor( Math.random() * 6 )生成的是0_{5的整数，要求是1}6的正整数，需要在计算结果后+1
• 判断条件完全错误：要求是die1和die2都等于1时显示特殊文本，当前代码只判断die1，且误用运算符=!（这是赋值+逻辑非的组合，不是相等判断运算符），同时判断逻辑写反
• 文本内容不符合要求：要求特殊状态显示全大写的SNAKE EYES，当前代码写的是小写开头的Snake Eyes
• JSX语法错误：JSX内部只能插入表达式，不能直接写if/else语句，且题目明确要求使用三元运算符实现判断
• 缺少渲染逻辑：未实现8e要求的调用ReactDOM.render将组件渲染到id为root的DOM节点的逻辑

// 8a 定义DiceRoll函数组件
function DiceRoll() {
    // 8b 生成1~6的随机数给die1
    const die1 = Math.floor( Math.random() * 6 ) + 1
    // 8c 生成1~6的随机数给die2
    const die2 = Math.floor( Math.random() * 6 ) + 1
    // 8d 使用三元运算符返回对应h1内容
    return (
        <h1>
            {die1 === 1 && die2 === 1 ? 'SNAKE EYES' : `${die1} & ${die2}`}
        </h1>
    )
};

// 8e 渲染组件到root节点（React 17及更早版本写法）
ReactDOM.render(<DiceRoll />, document.getElementById('root'))

如果是React 18+版本，渲染逻辑替换为如下写法即可：

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<DiceRoll />)

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