我試圖實(shí)現(xiàn)路徑查找可視化教程由克萊門特。我是新來的。開始和結(jié)束節(jié)點(diǎn)的顏色沒有被渲染。

請(qǐng)看看我的文件:

PathVisualizer.css:

.grid{
    margin: 500px 500 500;
    margin-top: 100px;
}

PathVisualizer.jsx:

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

import './PathfindingVisualizer.css';


export default class PathfindingVisualizer extends Component{
    constructor(props){
        super(props);
        this.state={
        nodes: [],
        };
    }
    componentDidMount() {
        const nodes=[];
       
        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={rowIdx}>
                            {row.map((node,nodeIdx) => {
                            const {isStart, isFinish} = node;
                            return(
                                
                                <Node>
                                    key={nodeIdx}
                                    isStart={isStart}
                                    isFinish={isFinish}
                                    test={'foo'}
                                    test={'kappa'}
                                </Node>
                            );
                        })}
                        </div>
                    );
                    })}
                
            </div>
        );
    }
}

Node.css:

.node {
    width: 25px;
    height: 25px;
    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;
}

Node.jsx:

import React, {Component} from "react";

import './Node.css';

export default class Node extends Component{
    constructor(props){
        super(props);
        this.state={}
    }

    render(){
        const {isFinish, isStart} = this.props
        const extraClassName = isFinish 
        ? 'node-finish'
        : isStart ? 'node-start'
        : '';
        return <div className ={`node ${extraClassName}`}></div>
        
    }

}

export const DEFAULT_NODE={
    row:0,
    col:0,
};

這些是我的文件。我得到了正確渲染的網(wǎng)格輸出。但是所提到的特定節(jié)點(diǎn)的節(jié)點(diǎn)顏色沒有改變。請(qǐng)幫我解決同樣的問題。

謝了。

對(duì)此我很好奇。我嘗試了我這邊的色彩渲染，但是效果很好。 您應(yīng)該檢查節(jié)點(diǎn)、isStart和isFinish屬性。

哦，你在這里有錯(cuò)誤的代碼。

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

這應(yīng)該是如下圖。

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