solidjs学起来

初次尝试一下最近🔥的框架solidjs

安装 🤖

根据官网提供的安装方式www.solidjs.com/guides/gett…，在这我选用的是Ts版本。项目模板安装完成后，执行以下命令运行项目。如果项目运行失败，考虑安装node16以上版本。

pnpm i

pnpm run dev

项目实战

入口文件index.tsx

/* @refresh reload */
import { render } from 'solid-js/web'

import './index.css'
import App from './App'

render(() => <App />, document.getElementById('root') as HTMLElement)

引入echarts

根据官网提供的指南安装echarts.apache.org/handbook/zh…，在此我使用的是pnpm安装。安装成功后，我使用的是全局引入，但小伙伴们可以使用按需引入更合理些，可参考官方文档。

// src/components/Chart.tsx

import * as echarts from 'echarts'
import type { Component } from 'solid-js'
import { onMount } from 'solid-js'

const Chart: Component = () => {
  let container: any = null
  let instance: any = null
  onMount(() => {
    instance = echarts.init(container!)
    instance.setOption({
      tooltip: {
        formatter: '{a} <b123r/>{b} : {c}%',
      },
      series: [
        {
          name: 'Pressure',
          type: 'gauge',
          detail: {
            formatter: '{value}',
          },
          data: [
            {
              value: 50,
              name: 'My task',
            },
          ],
        },
      ],
    })
  })
  return <div style="width: 600px;height:400px;" ref={container}></div>
}

export default Chart

// src/components/index.ts

export { default as Chart } from './Chart'

在App.tsx中引入组件即可

import type { Component } from 'solid-js'
import styles from './App.module.css'
import { Chart } from './components'

const App: Component = () => {
  return (
    <div class={styles.App} >
        <Chart />
    </div>
  )
}
export default App

踩坑记录📝

在使用Chart组件时报错：container is not a function

在定义container时，如果使用const就会出现以上错误❎，当我们使用let定义时即可解决。 let container: any = null