用React实现数字华容道游戏

以下是一个简化的React组件示例，用于实现数字华容道游戏中的一个数字块：

import React from 'react';
import PropTypes from 'prop-types';
 
// 数字块组件
const NumberBlock = ({ number, isHighlighted, onClick }) => {
  // 根据是否突出显示和是否可点击设置样式
  const blockStyle = {
    backgroundColor: isHighlighted ? 'yellow' : 'grey',
    color: 'white',
    cursor: onClick ? 'pointer' : 'default',
  };
 
  return (
    <div style={blockStyle} onClick={onClick}>
      {number}
    </div>
  );
};
 
// 属性验证
NumberBlock.propTypes = {
  number: PropTypes.number.isRequired,
  isHighlighted: PropTypes.bool,
  onClick: PropTypes.func,
};
 
export default NumberBlock;

这个组件接受三个属性：number（要显示的数字）、isHighlighted（一个布尔值，表示数字块是否应该突出显示）和onClick（当数字块被点击时调用的事件处理函数）。根据这些属性，组件会设置自己的样式，并在必要时处理点击事件。这个示例展示了如何创建一个可重用的组件，它遵循React组件设计的最佳实践。