Obsidian未完成ノート記録プラグイン作成ログ-3

Obsidian未完成ノート記録プラグイン作成ログ-3 | Obsidian未完成ノート記録プラグイン作成ログ-5
まず削除できないバグを修正

this.plugin.settings.targetPropertyValues = this.plugin.settings.targetPropertyValues.filter((ele) => targetPropertyValue != ele);

とりあえずバグは治った。

Flutterの中でColumnウィジェットとかの感じでReactでForを使いたい。
Reactのfor文レンダリングを使ってちょっとやってみる

なんかこんなエラーが出てきちゃった

型 '{ props: { [noteTitle: string]: UrmCardValue; }[]; }' を型 'IntrinsicAttributes & { [noteTitle: string]: UrmCardValue; }[]' に割り当てることはできません。  
プロパティ 'props' は型 'IntrinsicAttributes & { [noteTitle: string]: UrmCardValue; }[]' に存在していません。'pop' ですか

描画コンポーネントちょっと直してもらった

<ul>
	{props.map((card, index) => (
		<li key={index}>
			<URMCard
				contents={{
					noteTitle: card.noteTitle,
					status: card.status,
					desc: card.desc
				}}
			/>
		</li>
	))}
</ul>

辞書型でindexを使用したいときはこう書くらしい。

Object.keys(辞書型の変数)[index]

なんかこうして得られるキーは[]でもらえるからindexを0に指定するらしい。

なんかこうしたらerror解決した

export const URMCardList = (cards: {contents: {[noteTitle: string]: UrmCardValue}[]}) => {
	...
}

カードはこんな感じになった

render - Developer Documentation

render - Developer Documentation

docs.obsidian.md

HTMLをマークダウン形式にレンダリングするには

(method) MarkdownRenderer.render(
	app: App, 
	markdown: string, 
	el: HTMLElement, 
	sourcePath: string, 
	component: Component
): Promise<void>

を使用するらしい。

useStateとuseEffectを使用してマークダウンレンダラーを作成した。

useEffectはsetStateみたいなものらしい

これでhtmlを描画

return <div dangerouslySetInnerHTML={{ __html: html }} />;

Quote

dangerouslySetInnerHTMLの使用

dangerouslySetInnerHTMLは、特定のHTML要素の内容が動的であることをReactに伝えるために使用されます。これにより、該当ノードの子孫に対する仮想DOMとの比較をスキップし、パフォーマンスを向上させることができます2。