背景颜色未呈现给创建的节点。

huangapple
go评论98阅读模式
英文:

Background color is not rendering for the created nodes

问题

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 :

  1. .grid{
  2.     margin: 500px 500 500;
  3.     margin-top: 100px;
  4. }

PathVisualizer.jsx :

  1. import React, {Component} from "react";
  2. import Node from './Node/Node';
  3. import './Node/Node.css';
  5. import './PathfindingVisualizer.css';
  8. export default class PathfindingVisualizer extends Component{
  9.     constructor(props){
  10.         super(props);
  11.         this.state={
  12.         nodes: [],
  13.         };
  14.     }
  15.     componentDidMount() {
  16.         const nodes=[];
  17.        
  18.         for(let row=0; row<20; row++){
  19.             const currentRow=[];
  20.             for(let col=0; col<50; col++){
  21.                 const currentNode={
  22.                     col,
  23.                     row,
  24.                     isStart : row === 10 && col === 5,
  25.                     isFinish : row === 10 && col === 45 ,
  26.                 };
  27.                 
  28.                 currentRow.push(currentNode);
  29.             }
  30.             nodes.push(currentRow);
  31.         }
  32.         this.setState({nodes});
  33.     }
  34.     render(){
  35.         const {nodes}=this.state;
  36.         console.log(nodes);
  38.         return(
  39.             <div className="grid">
  40.                 {nodes.map((row,rowIdx)=>{
  41.                     return(
  42.                         <div key={rowIdx}>
  43.                             {row.map((node,nodeIdx) => {
  44.                             const {isStart, isFinish} = node;
  45.                             return(
  46.                                 
  47.                                 <Node>
  48.                                     key={nodeIdx}
  49.                                     isStart={isStart}
  50.                                     isFinish={isFinish}
  51.                                     test={'foo'}
  52.                                     test={'kappa'}
  53.                                 </Node>
  54.                             );
  55.                         })}
  56.                         </div>
  57.                     );
  58.                     })}
  59.                 
  60.             </div>
  61.         );
  62.     }
  63. }

Node.css :

  1. .node {
  2.     width: 25px;
  3.     height: 25px;
  4.     grid-gap: 20px;
  5.     outline: 1px solid rgb(94, 93, 93);
  6.     display: inline-block;
  7.   }
  9. .node-finish {
  11.   background-color: rgba(181, 6, 6, 0.751) !important;
  12. }
  14. .node-start {
  15.   background-color: rgb(4, 178, 4)!important;
  16. }

Node.jsx :

  1. import React, {Component} from "react";
  3. import './Node.css';
  5. export default class Node extends Component{
  6.     constructor(props){
  7.         super(props);
  8.         this.state={}
  9.     }
  11.     render(){
  12.         const {isFinish, isStart} = this.props
  13.         const extraClassName = isFinish 
  14.         ? 'node-finish'
  15.         : isStart ? 'node-start'
  16.         : '';
  17.         return <div className={`node ${extraClassName}`}></div>
  18.         
  19.     }
  21. }
  23. export const DEFAULT_NODE={
  24.     row:0,
  25.     col:0,
  26. };

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.

英文:

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.

Please take a look at my files:

PathVisualizer.css :

  1. .grid{
  2. margin: 500px 500 500;
  3. margin-top: 100px;
  4. }

PathVisualizer.jsx :

  1. import React, {Component} from &quot;react&quot;;
  2. import Node from &#39;./Node/Node&#39;;
  3. import &#39;./Node/Node.css&#39;
  4. import &#39;./PathfindingVisualizer.css&#39;;
  5. export default class PathfindingVisualizer extends Component{
  6. constructor(props){
  7. super(props);
  8. this.state={
  9. nodes: [],
  10. };
  11. }
  12. componentDidMount() {
  13. const nodes=[];
  14. for(let row=0; row&lt;20; row++){
  15. const currentRow=[];
  16. for(let col=0; col&lt;50; col++){
  17. const currentNode={
  18. col,
  19. row,
  20. isStart : row === 10 &amp;&amp; col === 5,
  21. isFinish : row === 10 &amp;&amp; col === 45 ,
  22. };
  23. currentRow.push(currentNode);
  24. }
  25. nodes.push(currentRow);
  26. }
  27. this.setState({nodes});
  28. }
  29. render(){
  30. const {nodes}=this.state;
  31. console.log(nodes);
  32. return(
  33. &lt;div className=&quot;grid&quot;&gt;
  34. {nodes.map((row,rowIdx)=&gt;{
  35. return(
  36. &lt;div key={rowIdx}&gt;
  37. {row.map((node,nodeIdx) =&gt; {
  38. const {isStart, isFinish} = node;
  39. return(
  40. &lt;Node&gt;
  41. key={nodeIdx}
  42. isStart={isStart}
  43. isFinish={isFinish}
  44. test={&#39;foo&#39;}
  45. test={&#39;kappa&#39;}
  46. &lt;/Node&gt;
  47. );
  48. })}
  49. &lt;/div&gt;
  50. );
  51. })}
  52. &lt;/div&gt;
  53. );
  54. }
  55. }

Node.css :

  1. .node {
  2. width: 25px;
  3. height: 25px;
  4. grid-gap: 20px;
  5. outline: 1px solid rgb(94, 93, 93);
  6. display: inline-block;
  7. }
  8. .node-finish {
  9. background-color: rgba(181, 6, 6, 0.751) !important;
  10. }
  11. .node-start {
  12. background-color: rgb(4, 178, 4)!important;
  13. }

Node.jsx :

  1. import React, {Component} from &quot;react&quot;;
  2. import &#39;./Node.css&#39;;
  3. export default class Node extends Component{
  4. constructor(props){
  5. super(props);
  6. this.state={}
  7. }
  8. render(){
  9. const {isFinish, isStart} = this.props
  10. const extraClassName = isFinish 
  11. ? &#39;node-finish&#39;
  12. : isStart ? &#39;node-start&#39;
  13. : &#39;&#39;;
  14. return &lt;div className ={`node ${extraClassName}`}&gt;&lt;/div&gt;
  15. }
  16. }
  17. export const DEFAULT_NODE={
  18. row:0,
  19. col:0,
  20. };

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.

答案1

得分: 1

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

哦，这里的代码有误。

  1. <Node
  2.    key={nodeIdx}
  3.    isStart={isStart}
  4.    isFinish={isFinish}
  5.    test={'foo'}
  6.    test={'kappa'}>
  7. </Node>
英文:

I am very curious about this. I tried color rendering on my side but it works well.
You should check the nodes, isStart and isFinish props.

Oh you have wrong code in here.

  1. &lt;Node&gt;
  2. key={nodeIdx}
  3. isStart={isStart}
  4. isFinish={isFinish}
  5. test={&#39;foo&#39;}
  6. test={&#39;kappa&#39;}
  7. &lt;/Node&gt;

This should be like below.

  1. &lt;Node
  2. key={nodeIdx}
  3. isStart={isStart}
  4. isFinish={isFinish}
  5. test={&#39;foo&#39;}
  6. test={&#39;kappa&#39;}&gt;
  7. &lt;/Node&gt;

huangapple
  • 本文由 发表于 2023年5月17日 06:27:23
  • 转载请务必保留本文链接：https://go.coder-hub.com/76267455.html
  • css
  • frontend
  • javascript
  • path-finding
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定