解决React组件中节点背景色不渲染问题：JSX属性传递与CSS样式应用

<Node>
   key={nodeIdx}
   isStart={isStart}
   isFinish={isFinish}
   test={'foo'}
   test={'kappa'}
</Node>

<Node
   key={nodeIdx}
   isStart={isStart}
   isFinish={isFinish}
   // 注意：重复的属性名（如'test'）只有最后一个会生效，此处为演示目的保留
   test={'foo'} 
   test={'kappa'} 
>
</Node>

import React, {Component} from "react";
import './Node.css';

export default class Node extends Component {
    constructor(props) {
        super(props);
        // 通常state在此处用于管理组件自身的内部状态，与props无关
        this.state = {}; 
    }

    render() {
        // 从props中解构isFinish和isStart
        const {isFinish, isStart} = this.props;

        // 根据isFinish或isStart的值，动态生成额外的CSS类名
        const extraClassName = isFinish 
            ? 'node-finish'
            : isStart 
                ? 'node-start'
                : ''; // 如果都不是，则为空字符串

        // 将基础类名'node'与动态生成的类名组合
        return <div className={`node ${extraClassName}`}></div>;
    }
}

// 导出默认节点结构，尽管在本例中未直接使用，但有助于定义数据模型
export const DEFAULT_NODE = {
    row: 0,
    col: 0,
};

.node {
    width: 25px;
    height: 25px;
    /* grid-gap通常用于grid容器，单个节点上可能不生效或无意义 */
    /* 建议检查此处是否符合设计意图，或考虑使用margin/padding */
    grid-gap: 20px; 
    outline: 1px solid rgb(94, 93, 93);
    display: inline-block; /* 使节点并排显示 */
}

.node-finish {
  background-color: rgba(181, 6, 6, 0.751) !important; /* 结束节点背景色 */
}

.node-start {
  background-color: rgb(4, 178, 4) !important; /* 起始节点背景色 */
}

import React, {Component} from "react";
import Node from './Node/Node'; // 导入Node组件
import './Node/Node.css'; // 导入Node组件的CSS
import './PathfindingVisualizer.css'; // 导入PathfindingVisualizer的CSS

export default class PathfindingVisualizer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            nodes: [], // 存储网格中的所有节点数据
        };
    }

    componentDidMount() {
        const nodes = [];
        // 遍历生成20行50列的网格
        for (let row = 0; row < 20; row++) {
            const currentRow = [];
            for (let col = 0; col < 50; col++) {
                // 定义每个节点的数据结构
                const currentNode = {
                    col,
                    row,
                    isStart: row === 10 && col === 5, // 确定起始节点
                    isFinish: row === 10 && col === 45, // 确定结束节点
                };
                currentRow.push(currentNode);
            }
            nodes.push(currentRow);
        }
        this.setState({nodes}); // 更新状态，触发渲染
    }

    render() {
        const {nodes} = this.state;
        // console.log(nodes); // 用于调试，确认节点数据结构

        return (
            <div className="grid">
                {nodes.map((row, rowIdx) => {
                    return (
                        // 为每行创建一个div，并使用key提高性能
                        <div key={rowIdx} className="grid-row"> {/* 可以为行添加一个类名 */}
                            {row.map((node, nodeIdx) => {
                                // 解构出isStart和isFinish属性
                                const {isStart, isFinish} = node;
                                return (
                                    // 正确传递属性给Node组件
                                    <Node
                                        key={nodeIdx} // key属性应放在组件标签内
                                        isStart={isStart}
                                        isFinish={isFinish}
                                        // 避免重复的属性名，或确保它们有意义
                                        // test={'foo'} 
                                        // test={'kappa'}
                                    />
                                );
                            })}
                        </div>
                    );
                })}
            </div>
        );
    }
}