读取 JSON 文件并以图形树视图表示它

Question

您好，我是使用 React JS 进行 Web 开发的新手，在下面有疑问。

如何使用 react js 将 Json 对象数据表示为 UI 端的树视图等图形视图？并且还需要进行双向绑定，如果用户在 UI 处进行更改，则也应在原始 Json 对象处呈现相同的内容。

Answer 1

您可以根据需要表示您的 JSON 树，例如 - 您可以 'draw' 您的结构包含 div 的集合。您可以通过 json-array 映射并代表您 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>
    );
  }

Parents div 可能有红色背景，嵌套的 div 可能有缩进和另一种背景颜色。你的问题不具体。你想做什么？

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

读取 JSON 文件并以图形树视图表示它

Read JSON file and represent it graphical tree view

javascript

jquery

web-deployment

reactjs