JSON 파일 읽기 및 그래픽 트리보기

안녕하세요, 저는 React JS를 사용하여 웹 개발에 매우 익숙하며 아래에 의심의 여지가 있습니다.

Json 개체 데이터를 UI보기의 트리보기와 같은 그래픽보기로 표현하는 방법은 react js ?? 그리고 양방향 바인딩도해야합니다. 사용자가 UI에서 변경을 수행하면 원본 Json 객체에서도 변경해야합니다. 당신이 원하는대로

출처

2017-12-24 Surimani Santhosh

이 두 가지 주제는 모두 쉽게 조사 할 수 있습니다. Stackoverflow는 * "방법"* 튜토리얼 서비스가 아닙니다. 당신이 해결할 수없는 실제 코드에 문제가있을 때 돌아 오십시오. – charlietfl

당신은 예를 들어, 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에는 들여 쓰기 및 다른 배경색이있을 수 있습니다. 귀하의 질문은 구체적이지 않습니다. 너는 무엇을하고 싶니?

실제 자연은 양방향 데이터 바인딩을 지원하지 않습니다. 사용자가 데이터를 변경하면 데이터를 수동으로 저장해야합니다. Redux도 사용한다면 큰 문제는 아닙니다.

출처

2017-12-24 19:38:52 Victor

고맙습니다. 내 의심은 .. 동적 인 JSON 객체 데이터를 UI의 그래픽 트리 구조로 나타내려면 어떻게해야할까요? 구성 요소. 예를 들어 react-treeview 및 react-ui-tree 구성 요소와 같은 구성 요소는 해당 구성 요소를 통과했지만 폴더 계층 구조로 렌더링됩니다. 하지만 내 요구 사항은 휴식 API 호출을 통해받은 json 데이터를 기반으로 흐름 다이어그램으로 제시하는 것입니다. 제발 ... 미리 감사드립니다. –

아래 링크에서 언급 한 샘플 흐름 다이어그램 .. https://blog.pusher.com/making-reactjre-realtime-with-websockets/ –

나는이 문제에 대한 답변을 얻었으며 goJS 구성 요소 통합을 사용하여 수행 할 수 있습니다. 안으로. 빅터에게 감사드립니다. –

JSON 파일 읽기 및 그래픽 트리보기

답변

관련 문제