feat: app调用,需要从外面穿参数app到react组件里面去

This commit is contained in:
liufree 2025-03-02 00:56:57 +08:00
parent 4aaf1d27f8
commit a8e785ffde
3 changed files with 48 additions and 37 deletions

View file

@ -96,7 +96,7 @@ export default class MyPlugin extends Plugin {
const container = el.createDiv();
// 创建一个 MarkdownRenderChild 实例
const reactComponent = new ReactDemo(container, source);
const reactComponent = new ReactDemo(container, source,this.app);
ctx.addChild(reactComponent);
});

View file

@ -10,10 +10,7 @@ export default class ReactComponent extends MarkdownRenderChild {
root: Root;
container: HTMLElement;
constructor(container: HTMLElement, private source: string) {
constructor(container: HTMLElement, private source: string, private app: App) {
super(container);
this.container = container;
}
@ -28,6 +25,6 @@ export default class ReactComponent extends MarkdownRenderChild {
// 使用 createRoot 渲染 React 组件
const root = createRoot(this.container);
root.render(<TableDemo />);
root.render(<TableDemo app={this.app} />);
}
}

View file

@ -5,7 +5,8 @@ import {Button, Dropdown, Space, Tag} from 'antd';
import {useEffect, useRef} from 'react';
import React from 'react';
import request from 'umi-request';
import { getAPI } from 'obsidian-dataview';
import {getAPI} from 'obsidian-dataview';
import {App,Workspace} from "obsidian";
export const waitTimePromise = async (time: number = 100) => {
return new Promise((resolve) => {
@ -39,37 +40,11 @@ type GithubIssueItem = {
text: string;
};
const columns: ProColumns<GithubIssueItem>[] = [
{
dataIndex: 'index',
valueType: 'indexBorder',
width: 48,
},
{
title: '标题',
render: (_, record) => (
<Space>
{record.header.path}
</Space>
),
},
{
title: '文本',
dataIndex: 'text',
filters: true,
onFilter: true,
ellipsis: true,
render: (_, record) => (
console.log("record",record),
<Space>
{record.text}
</Space>
),
},
];
export default () => {
interface MyReactComponentProps {
app: any; // Obsidian的App对象
}
const MyReactComponent: React.FC<MyReactComponentProps> = ({ app }) => {
const actionRef = useRef<ActionType>();
const dataviewAPI = getAPI();
@ -83,6 +58,44 @@ export default () => {
setData(data);
}, []);
const columns: ProColumns<GithubIssueItem>[] = [
{
dataIndex: 'index',
valueType: 'indexBorder',
width: 48,
},
{
title: '标题',
render: (_, record) => (
console.log("record",_),
<a onClick={()=>{
// 调用 Obsidian API
const file = app.vault.getAbstractFileByPath(record.header.path);
if (file) {
app.workspace.activeLeaf?.openFile(file);
}
}} >
{record.header.path}
</a>
),
},
{
title: '文本',
dataIndex: 'text',
filters: true,
onFilter: true,
ellipsis: true,
render: (_, record) => (
console.log("record",record),
<Space>
{record.text}
</Space>
),
},
];
return (
<ProTable<GithubIssueItem>
columns={columns}
@ -167,3 +180,4 @@ export default () => {
/>
);
};
export default MyReactComponent;