React-diagrams节点不可见求助：按文档安装后渲染异常

我之前也碰到过一模一样的情况——节点占位位置能看到，但就是看不到节点本身，大概率是样式加载或者初始化环节出了问题，咱们一步步排查：

1. 先确认CSS是否真的生效了 #

有时候@import "~storm-react-diagrams/src/sass/main";看起来没问题，但实际构建时路径没被正确解析。你可以换个方式试试：

• 直接在入口文件（比如index.js）里导入编译好的CSS文件：

  import 'storm-react-diagrams/dist/style.min.css';
  

• 打开浏览器开发者工具的Elements面板，找一下节点对应的元素（比如带.sd-node类的div），看看有没有加载到对应的样式。如果这些类的样式全是空的，那肯定看不到节点。

2. 检查画布容器的尺寸设置 #

react-diagrams的画布需要明确的宽高，不然很容易渲染异常。给你的Diagram组件外层容器加个明确的尺寸：

.diagram-container {
  width: 100%;
  height: 80vh;
  border: 1px solid #eee; /* 加个边框方便你确认容器范围 */
}

然后组件里这么用：

<div className="diagram-container">
  <DiagramWidget diagramEngine={this.engine} />
</div>

3. 验证引擎和模型的初始化顺序 #

引擎的创建、模型的添加、组件挂载的顺序不能乱，正确的流程大概是这样的：

import * as SRD from 'storm-react-diagrams';

class MyDiagram extends React.Component {
  constructor(props) {
    super(props);
    // 先创建引擎并安装默认工厂
    this.engine = new SRD.DiagramEngine();
    this.engine.installDefaultFactories();
    
    // 创建图表模型
    this.model = new SRD.DiagramModel();
    
    // 添加示例节点
    const node = new SRD.DefaultNodeModel("测试节点", "rgb(0,192,255)");
    node.setPosition(150, 150);
    this.model.addNode(node);
    
    // 把模型关联到引擎
    this.engine.setDiagramModel(this.model);
  }
  
  render() {
    return (
      <div className="diagram-container">
        <SRD.DiagramWidget diagramEngine={this.engine} />
      </div>
    );
  }
}

如果你用了redux的engineReducer，要确保store里的引擎实例是完全初始化好的，组件拿到的不是空对象或者未完成初始化的状态。

4. 检查自定义节点的样式继承 #

如果是用了自定义节点组件，别忘了继承默认的样式类。比如你的自定义节点根元素要加上.sd-node：

class CustomNode extends SRD.NodeWidget {
  render() {
    return (
      <div className="sd-node">
        {/* 你的节点内容 */}
        <div className="sd-node__title">{this.props.node.getTitle()}</div>
      </div>
    );
  }
}

5. 排查构建工具的路径解析问题 #

如果你用webpack，检查sass-loader的配置是否正确解析~路径，确保node_modules在 resolver 的范围内：

module.exports = {
  resolve: {
    modules: ['node_modules']
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
};

你可以先从CSS加载和容器尺寸这两点入手，这两个是最常见的原因。如果还是不行，再仔细核对引擎初始化的步骤有没有遗漏~

内容的提问来源于stack exchange，提问作者ajthinking