React

Question

을 사용하여 브라우저에서 앱 미리보기를 렌더링하는 방법 동일한 웹 페이지에서이 애플리케이션의 구성 요소를 추가/편집하기 위해 양식을 사용하여 무언가를 변경할 때마다보기를 업데이트하는 앱의 실시간 미리보기를 표시해야합니다. Siberian CMS과 유사합니다. 하지만 그들은 iframe을 사용하고 다른 방법을 사용하여 React을 사용하는 것이 더 낫다고 생각합니다. 하지만 저는이 도구에 익숙하지 않으므로 그 도구를 어떻게 활용할 지 단서가 없습니다. 이 작업을 수행하는 다른 방법이 있습니까?

감사 :

다음은 내가해야 할 일을 매우 비슷합니다 시베리아 CMS의 이미지입니다!

Answer 1

React에서 이와 같은 작업을하는 것은 실제로 매우 간단합니다. 왼쪽에있는 양식이 입력되어 오른쪽에있는 전화로 상태를 공유합니다. 아주 간단한 예제를 만들었습니다. http://jsbin.com/jatagoculi/edit?html,css,js,output

React로 작성한 레이아웃/CSS는 가장 까다로운 부분 일 가능성이 매우 높습니다.

기본적으로 입력 업데이트는 this.setState({key: value})이며 오른쪽에있는 전화 디스플레이에는 <div>{this.state.key}</div>과 함께 상태가 참조됩니다. 입력 내용을 입력 할 때마다 전화로 변경 사항이 표시됩니다.

물론 배열 (상태에 저장된)을 버튼으로 변환하는 등의 작업을 훨씬 더 복잡하게 만들 수 있습니다.

getInitialState: function() { 
    return { 
    buttons: [1, 2, 3] 
    } 
} 

var buttons = this.state.buttons.map(item => { 
    return <div className="button">{item}</div>; 
}); 

<div>{buttons}</div> 

당신은 또한 표시하고 구성 요소를 숨길 수 있습니다 :

this.state.showMenu ? this.showMenu : //do something else; 

희망이 도움이!