使用原生JS写的组件，依赖zrender.js和D3.js，怎么将这个组件用在react项目中

Question

背景：

有需求要实现一个上下都可展开的树状图，由于能力有限，所以让师傅调研，师傅只会写传统的JS，他用传统的JS封装好了，目录如下：

依赖d3.js和zrender.js,现在想把它放到react的项目中，因为react版本的zrender中的方法和原生的zrender用法不同，所以我都是用　script　标签引入的。

然后将amtree.js中的amtree对象拷到react的tools.js中。

问题：
现在在tools.js文件中还是报 zrender is not defined ，我在这个文件中是不是还要import个zrender，但是使用npm安装的zrender，使用方法和原生的不一样啊，怎么办？

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

你已经正确地引入了所需的库。如果你在tools.js文件中看到zrender未定义的错误，可能是因为你的zrender模块没有被正确加载。你可以尝试以下步骤来解决这个问题：

1. 首先确保你在项目的根目录下有一个名为zrender的子目录，其中包含你的zrender模块及其依赖项（例如d3.js）。

mkdir zrender
cd zrender

1. 在zrender子目录中创建一个名为package.json的文件，并添加以下内容：

{
  "name": "zrender",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "d3": "^4.1.0",
    // 添加其他依赖项
  },
  "devDependencies": {
    "npm": "^6.1.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.10"
  }
}

1. 使用命令行运行以下命令来初始化一个新的Node.js项目并安装所有依赖项：

npm init -y
npm install --save-dev @babel/core @babel/cli babel-loader webpack webpack-cli

1. 创建一个新的webpack.config.js文件，并设置以下配置：

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.html$/,
        use: ['isomorphic-unfetch']
      }
    ]
  }
};

1. 在src目录下创建一个名为index.js的新文件，并编写以下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';

import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

createRoot(document.getElementById('app')).render(<App />);

1. 运行npm start以启动开发服务器。此时你应该能看到你的App组件渲染在浏览器上。

2. 如果一切正常，你可以在zrender目录下的index.html文件中看到你的App组件的输出。

通过以上步骤，你应该能够正确地使用zrender库并在React项目中进行渲染。