如何使用React在浏览器中呈现应用预览

Question

我需要显示一个应用程序的实时预览，每当我使用表单更改某些内容以在同一网页中添加/编辑此应用程序的组件时，该应用程序都会更新视图。与Siberian CMS类似。但他们使用iframe，我看到了另一种使用React的方法，我认为更好。但我对这个工具很陌生，所以我不知道如何完成它。还有另一种方法吗？

以下是西伯利亚CMS的图片，与我需要做的非常相似：

谢谢！

Answer 1

在React中做这样的事情其实很简单。您左侧的表单将输入并与右侧的电话共享状态。我在这里创建了一个非常简单的例子：http://jsbin.com/jatagoculi/edit?html,css,js,output

可能最具挑战性的部分是你的布局/ css，因为React让这很容易。

基本上，您有输入更新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;

希望这有帮助！