javascript - 读取 JSON 文件并以图形 TreeView 表示它

Question

您好，我对使用 React JS 进行 Web 开发非常陌生，并且有以下疑问。

如何使用 React js 将 Json 对象数据表示为 UI 端 TreeView 等图形 View ？并且还需要进行两种方式绑定(bind)，如果用户在 UI 上进行更改，同样也应该在原始 Json 对象上呈现。

Answer 1

您可以根据需要表示您的 JSON 树，例如 - 您可以使用 div 集合“绘制”您的结构。您可以通过 json 数组进行映射并代表您的 UI。像这样的东西:

render() {
    return (
        <div className="entities">
        { 
          this.props.myObjects.map( (obj, index) => 
          { 
            return <Link key={index} to={`/somepath/${index}`} >
            <div><p>{obj.name}</p></div></Link> 
          })
        }
        </div>
    );
  }

父级 div 可能有红色背景，嵌套 div 可能有缩进和其他背景颜色。你的问题不具体。你想做什么？

React 本质上不支持双向数据绑定(bind)。如果您的用户更改数据 - 您需要手动保存数据。如果您也将使用 Redux，这并不是什么大问题。