小编app*_*pps的帖子

我在 ag-grid 中使用主/详细信息。我想要在所有行之后的详细部分中有一个保存按钮。我可以使用模板来做到这一点，但它不会触发事件。我认为它只是一个模板，不适用于活动。您能否建议我如何在详细部分添加按钮

这是我的代码

columnDefs: [
    {
        headerName: "CompanyName",
        field: "CompanyName",
        cellRenderer: "agGroupCellRenderer"
    }
],
groupDefaultExpanded: 0,
detailRowHeight: 200,
detailCellRendererParams: {
    detailGridOptions: {
        columnDefs: [                            
                    {
                        headerName: "Name",
                        field: "Name",
                        cellRenderer: "agGroupCellRenderer"
                    },
                    {
                        headerName: "Age",
                        field: "Age",
                        suppressFilter: true,
                    },
                    {
                        headerName: "Gender",
                        field: "Gender",
                        suppressFilter: true,
                    }
        ],
        onGridReady: function (params: any) {
            params.api.sizeColumnsToFit();
        }
    },
    getDetailRowData: function (params: any) {
        params.successCallback(params.data.ChannelComponentsVm);
    },
      template:
      '<div style="height: 100%;">' +
      '<div ref="eDetailGrid" style="height: 90%;"></div>' +
      '<div style="height: 10%;"> <button (click)="saveEmployeeDetails()">Save</button> …

我正在实现 using @apollo/client，但我没有看到任何完整的@apollo/clientwith示例react。如果我搜索，我会得到示例 apollo-client和apollo boost。

3个有什么区别。 我理解的@apollo/client都是新版的。我在哪里可以得到完整的例子@apollo/client与react应用？

import { ApolloClient, InMemoryCache, ApolloLink, createHttpLink, defaultDataIdFromObject } from '@apollo/client';
import { ApolloClient, InMemoryCache, ApolloLink } from 'apollo-boost';

我正在尝试反应模块联合。我使用 create-react-app 命令创建了两个 React 应用程序（modulefederation1、modulefederation2）。当我运行应用程序时，出现“未捕获错误：共享模块不可用于急切消费：webpack/sharing/consume/default/react/react”错误。

节点版本： v16.14.2

下面是我的代码。

模块联盟1：

包.json：

{
  "name": "modulefederation1",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.1",
    "@types/node": "^16.11.36",
    "@types/react": "^18.0.9",
    "@types/react-dom": "^18.0.4",
    "html-webpack-plugin": "^5.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "serve": "^13.0.2",
    "ts-loader": "^9.3.0",
    "typescript": "^4.6.4",
    "web-vitals": "^2.1.4",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.0"
  },
  "scripts": {
    "start": "webpack serve --open",
    "build": "webpack --config webpack.prod.js",
    "serve": "serve dist -p 3002",
    "clean": "rm -rf dist"
},
  "eslintConfig": {
    "extends": [ …

当我使用 @apollo/client 进行 graphql api 调用时出现以下错误

React Hook“useQuery”在函数“graphqlService”中调用，该函数既不是React函数组件，也不是自定义React Hook函数react-hooks/rules-of-hooks

索引文件：

import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

const client = new ApolloClient({
  uri: "http://localhost:3008",
  cache: new InMemoryCache()
});

 ReactDOM.render(
      <ApolloProvider client={client}>
       <App/>
    </ApolloProvider>,       
        document.getElementById('root')
      );

功能组件文件：

import React from 'react';
import {  
  useQuery,
  gql
} from "@apollo/client";
import Schema from '../models/schema';

function graphqlService( params : any = {} ) {
  const query = Schema.getPanelData;
  const { data } = useQuery(query, {variables: params});

  if (data) return data;     
}

导出默认的graphqlService；

类组件文件： …