Carbon Components Svelte TreeView：如何根据属性修改子项颜色？

方案1：使用renderItem自定义渲染函数 #

Carbon Components Svelte的TreeView组件支持通过renderItem函数定制每个节点的渲染逻辑，这是最直接的方式来根据节点属性设置样式：

<script>
import { TreeView, TreeViewItem } from "carbon-components-svelte";

// 你的树形数据
const items = [
  {
    id: 1,
    text: "常规文件夹",
    children: [
      { id: 2, text: "已删除文档", removed: true },
      { id: 3, text: "活跃文档" },
    ],
  },
  { id: 4, text: "已删除文件夹", removed: true },
];

// 自定义节点渲染逻辑
function renderItem(item) {
  return {
    component: TreeViewItem,
    props: {
      // 根据removed属性动态设置文本颜色
      style: item.removed ? "color: #ff0000;" : "",
      text: item.text,
    },
  };
}
</script>

<TreeView items={items} renderItem={renderItem} />

方案2：利用插槽（Slot）定制节点 #

如果你更习惯Svelte的插槽语法，也可以通过item插槽来实现：

<script>
import { TreeView, TreeViewItem } from "carbon-components-svelte";

const items = [
  // 同上的树形数据
];
</script>

<TreeView items={items}>
  <svelte:fragment slot="item" let:item>
    <TreeViewItem 
      text={item.text}
      // 直接绑定样式到节点属性
      style={item.removed ? "color: red;" : ""}
    />
  </svelte:fragment>
</TreeView>

为什么之前的{#each}方式没生效？ #

TreeView组件内部已经封装了节点的遍历、嵌套展开等逻辑，手动用{#each}遍历节点会和组件内部逻辑冲突，所以必须使用组件提供的renderItem或插槽机制来定制节点样式。

内容的提问来源于stack exchange，提问作者Manixes