javascript - 在逐个节点的基础上设计 react-treebeard

Question

我react-treebeard在我的react.js项目中有。

当我尝试创建时，<TreeBeard />我提供data,onToggle和style具有适当值的属性（根据文档）。

但是我找不到如何逐个节点设置元素样式的方法。

例如，我有一棵这样的树：

ParentNode
  -> ChildNode1
  -> ChildNode2
  -> ChildNode3

这是我的代码：

import React, { useState } from 'react'
import { Treebeard } from 'react-treebeard'

const MyComponent = ({ data }) => {
  const [treeData, setTreeData] = useState(data)
  const [cursor, setCursor] = useState(false)

  const onToggle = (node, toggled) => {
    if (cursor) {
      cursor.active = false
    }

    node.active = true
    if (node.children) {
      node.toggled = toggled
    }

    setCursor(node)
    setTreeData(Object.assign({}, data))
  }

  return <Treebeard
    style={treeStyle}
    data={treeData}
    onToggle={onToggle} />
}

export default MyComponent

const treeStyle = {
  tree: {
    base: {
      listStyle: 'none',
      backgroundColor: 'white',
      margin: 0,
      padding: 0,
      color: 'rgb(35,31,32)',
      fontFamily: '"Helvetica Neue", "Open Sans", Arial, sans-serif',
      fontSize: '1.3rem'
    },
    node: {
      base: {
        position: 'relative'
      },
    link: {
      cursor: 'pointer',
      position: 'relative',
      padding: '0px 5px',
      display: 'block'
    },
    activeLink: {
      background: 'rgba(0, 0, 0, 0.04)'
    },
    toggle: {
      base: {
        position: 'relative',
        display: 'inline-block',
        verticalAlign: 'top',
        marginLeft: '-5px',
        height: '24px',
        width: '24px'
      },
      wrapper: {
        position: 'absolute',
        top: '50%',
        left: '50%',
        margin: '-7px 0 0 -7px',
        height: '14px'
      },
      height: 14,
      width: 14,
      arrow: {
        fill: 'rgb(35,31,32)',
        strokeWidth: 0
      }
    },
    header: {
      base: {
        display: 'inline-block',
        verticalAlign: 'top',
        color: 'rgb(35,31,32)'
      },
      connector: {
        width: '2px',
        height: '12px',
        borderLeft: 'solid 2px black',
        borderBottom: 'solid 2px black',
        position: 'absolute',
        top: '0px',
        left: '-21px'
      },
      title: {
        lineHeight: '24px',
        verticalAlign: 'middle'
      }
    },
    subtree: {
      listStyle: 'none',
      paddingLeft: '19px'
    },
    loading: {
      color: '#E2C089'
      }
    }
  }
}

默认情况下，他们共享相同的样式，我想要的是为每个孩子设置不同的样式（例如不同的颜色/fontWeight/等）。

如果没有某种黑客，这件事甚至可能吗？如果可能的话，我该怎么做？

标签： javascriptreactjs

Answer 1

尝试这个：

Treebeard.defaultProps = {
    style: {
      tree: {
        base: {
          listStyle: "none",
          backgroundColor: "white",
          margin: 0,
          padding: 0,
          color: "#00ff00",
          fontFamily: "lucida grande ,tahoma,verdana,arial,sans-serif",
          fontSize: "14px",
          height: "100%",
          width: "100%",
        },
        node: {
          base: {
            position: "relative",
          },
          link: {
            cursor: "pointer",
            position: "relative",
            padding: "0px 5px",
            display: "block",
          },
          activeLink: {
            background: "#31363F",
          },
          toggle: {
            base: {
              position: "relative",
              display: "inline-block",
              verticalAlign: "top",
              marginLeft: "-5px",
              height: "24px",
              width: "24px",
            },
            wrapper: {
              position: "absolute",
              top: "50%",
              left: "50%",
              margin: "-7px 0 0 -7px",
              height: "14px",
            },
            height: 14,
            width: 14,
            arrow: {
              fill: "#9DA5AB",
              strokeWidth: 0,
            },
          },
          header: {
            base: {
              display: "inline-block",
              verticalAlign: "top",
              color: "#9DA5AB",
            },
            connector: {
              width: "2px",
              height: "12px",
              borderLeft: "solid 2px black",
              borderBottom: "solid 2px black",
              position: "absolute",
              top: "0px",
              left: "-21px",
            },
            title: {
              lineHeight: "24px",
              verticalAlign: "middle",
            },
          },
          subtree: {
            listStyle: "none",
            paddingLeft: "19px",
          },
          loading: {
            color: "#E2C089",
          },
        },
      },
    },
  };