데이터베이스에서로드 된 동적 인터페이스에 가장 적합한 방법입니다.

Question

webapp을 다시 작성해야하며 React에서 수행하고 싶습니다.

하나 :이 현재 작동 방법

데이터베이스에 따라서

{ 
    row: 1, 
    column: 2, 
    width: 2, 
    height: 1, 
    data: 'Why hello there', 
    componentType: 'Box' 
} 

같은 수 각 "페이지"에 대한 행이 있다고, 나는 여기에 두 가지 문제가 런타임시 알 수없는 React 구성 요소 ("Box")를 동적으로로드하고 싶습니다.

2 : 여기서 구성 요소/레이아웃을 전환하는 몇 가지 확실한 방법이 있습니까? 나는 반응 경로에 대해 알고 있지만 내가 본 모든 튜토리얼은 훨씬 더 "정적"(기본적으로 이미 앱이 시작되기 전에 모든 뷰와 경로를 이미 알고있는 곳, 실제로는 불가능한 곳)하는 것으로 나타났습니다. 데이터베이스에서 해당 데이터 가져 오기)

Answer 1

아이디어는 기본적으로 "비어있는"앱 버전을 렌더링하는 것입니다. 스플래시 화면이나 로딩 스피너, 또는이 둘의 조합 또는 다른 어떤 것이 든 상관 없습니다.

그런 다음 앱을 마운트 한 후 componentDidMount 메서드에서 데이터베이스의 데이터를 가져 오는 서버에서 실행중인 API에 http 요청을 보내고 webapp이 이해할 수있는 형식 (예 : JSON)으로 데이터를 반환합니다. 그런 다음 반환 된 데이터로 앱을 채우고 작업이 완료되면로드 스크린이나 회 전자를 끕니다.

체크 아웃 this example from the React docs을 확인하십시오.

Answer 2

webpack 동적 번들 로딩을 사용할 수 있습니다.