类型错误：_Node_module_css__WEBPACK_IMPORTED_MODULE_2___default.a.node 不是 function

Question

确切的错误

 12 | 
  13 |  return (
  14 |    <div>
> 15 |      <div className={styles.node`${classs}`}></div>
     | ^  16 |      {isStartingPoint
  17 |        ? console.log("green", `row column are ${row} and ${column}`)
  18 |        : null}

发生错误的组件

import React from "react";
import styles from "./Node.module.css";

const Node = ({ isStartingPoint, isEndingPoint, row, column }) => {
  const classs = isStartingPoint
    ? "node-start"
    : isEndingPoint
    ? "node-end"
    : null;

  console.log("classess", classs);

  return (
    <div>
      <div className={styles.node`${classs}`}></div> // here the error is //happening
      {isStartingPoint
        ? console.log("green", `row column are ${row} and ${column}`)
        : null}
      {isEndingPoint
        ? console.log("laal", `row column are ${row} and ${column}`)
        : null}
    </div>
  );
};

export default Node;

父组件

import React, { useState, useEffect } from "react";
import Node from "../Node/Node";
import styles from "../PathFinder/PathFinder.module.css";

const rows = 10;
const columns = 25;

// need to make this dynamic
const startNodeRow = 0;
const startNodeColumn = 0;
const endNodeRow = rows - 1;
const endNodeColumn = columns - 1;

const PathFinder = () => {
  const [Grid, setGrid] = useState([]);

  useEffect(
    () => {
      initializeGrid();
    },
    // eslint-disable-next-line
    []
  );

  const initializeGrid = () => {
    const grid = new Array(rows);
    for (let index = 0; index < rows; index++) {
      grid[index] = new Array(columns);
    }

    createSpot(grid);
    setGrid(grid);
  };

  const createSpot = (grid) => {
    for (let i = 0; i < rows; i++) {
      for (let j = 0; j < columns; j++) {
        grid[i][j] = new Spot(i, j);
      }
    }
  };

  function Spot(i, j) {
    this.x = i;
    this.y = j;
    this.isStartingPoint =
      this.x === startNodeRow && this.y === startNodeColumn;
    this.isEndingPoint = this.x === endNodeRow && this.y === endNodeColumn;
    this.g = 0;
    this.f = 0;
    this.h = 0;
  }

  //   console.log("Grid", Grid);
  //   console.log("Grid rows", Grid.length);
  //   console.log("Grid columns", Grid[0].length);

  const gridMadeUpOfNodes = (
    <div>
      {Grid.map((row, index) => {
        console.log("Rrrrrrow mein kia hai", row);
        return (
          <div key={index} className={styles.rowWrapper}>
            {row.map((column, index) => {
              console.log("column mein kia hai", column);
              const { isStartingPoint, isEndingPoint, x, y } = column;
              console.log({ isStartingPoint, isEndingPoint });
              return (

                <Node
                  key={index}
                  isStartingPoint={isStartingPoint}
                  isEndingPoint={isEndingPoint}
                  row={x}
                  column={y}
                />
              );
            })}
          </div>
        );
      })}
    </div>
  );

  return (
    <>
      <h1 className={styles.container}>Algorithm Visualizer</h1>
      <div className={styles.container}>{gridMadeUpOfNodes}</div>
    </>
  );
};

export default PathFinder;

我正在尝试根据从父组件获得的值进行条件渲染以更改 className（道具工作正常）。 父组件以正确的方式传递值，但在子组件中，我无法更改类名