问题

I am trying to implement Path Finding Visualizer tutorial by Clement. I am new with the react. The color for the start and the end node is not getting rendered.

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,
}; 

These are my files. I am getting the output of the grid rendered correctly. But the node color for that specific mentioned nodes are not changing. Please help me out in the same.

Thanks.

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

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 {
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;
}

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,
}; 

答案1

得分: 1

我对此很好奇。我在我的一侧尝试了颜色渲染，它运行良好。
您应该检查节点，isStart 和 isFinish 属性。

哦，这里的代码有误。

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

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

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