[英]Setting Up an AG-Grid Component in FramerX
我正在使用 FramerX 制作原型,我們的生產軟件使用 Ag-Grid 來制作大量組件。 我需要能夠在我最新的原型中加入 Ag-Grid。
有誰知道我如何在最基本的層面上進行設置?
我能夠弄清楚如何制作 AG-Grid 入門教程中提供的簡單 ag-grid 表: https://stackblitz.com/edit/ag-grid-react-hello-world
訣竅是我忘記了 FramerX 使用 TypeScript 語法,所以對於這個例子有一些需要修改的地方。 下面是我最終使用的代碼。 我將通過我必須進行的編輯 go。
import * as React from "react"
import { Frame, addPropertyControls, ControlType } from "framer"
import { AgGridReact } from "@ag-grid-community/react"
import { AllCommunityModules } from "@ag-grid-community/all-modules"
import "@ag-grid-enterprise/all-modules/dist/styles/ag-grid.css"
import "@ag-grid-enterprise/all-modules/dist/styles/ag-theme-material.css"
interface MyProps {}
interface MyState {
columnDefs: object
rowData: object
}
export class Simple_Table extends React.Component<MyProps, MyState> {
//Set the data for the Table
constructor(props) {
super(props)
this.state = {
//Set the Columns
columnDefs: [
{
headerName: "Make", field: "make"
}, {
headerName: "Model", field: "model"
}, {
headerName: "Price", field: "price"
}
],
//Set the actual data
rowData: [
{
make: "Toyota", model: "Celica", price: 35000
}, {
make: "Ford", model: "Mondeo", price: 32000
}, {
make: "Porsche", model: "Boxter", price: 72000
}
],
}
}
render() {
return (
<Frame
style={{ height: "368px", width: "784px", background: "#FAFAFA" }}
className="ag-theme-material"
>
<AgGridReact
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}
modules={AllCommunityModules}
></AgGridReact>
</Frame>
)
}
}
首先,不要像這樣在導入中分別調用 React 和 Component:
import React, { Component } from 'react';
我使用通配符導入 React,例如 show Framer 通常會這樣做:
import * as React from "react"
那么既然這是 TypeScript 和 React,你需要在組件之前定義接口中的 props 和 states。 確保將狀態設置為對象,因為它們將是 arrays。
interface MyProps {}
interface MyState {
columnDefs: object
rowData: object
}
然后我重寫了組件 function 以在開頭有導出,並在 function 中調用“MyProps”和“MyState”接口,再次因為這是 Z558B544CF685F39D34E4903E
export class Simple_Table extends React.Component<MyProps, MyState> {...}
最后但同樣重要的是,我通過包含 Framer 的模塊將<div>...</div>
更改為<Frame>...</Frame>
:
import { Frame, addPropertyControls, ControlType } from "framer"
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.