在 FramerX 中设置 AG-Grid 组件

Question

我正在使用 FramerX 制作原型，我们的生产软件使用 Ag-Grid 来制作大量组件。 我需要能够在我最新的原型中加入 Ag-Grid。

有谁知道我如何在最基本的层面上进行设置？

Answer 1

我能够弄清楚如何制作 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"