如何使用React在浏览器中呈现应用预览
加布里埃尔·佩雷拉（Gabriel Pereira）
贾斯汀
在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;
希望这可以帮助！
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何使用Python在浏览器中预览pdf文件？
- 2
如何使用Expo（React-Native）在Web浏览器中呈现HTML字符串？
- 3
如何使用ExpressJS在浏览器中呈现JSON
- 4
如何指示Chrome浏览器下载PDF而不是在浏览器中预览（预览）？
- 5
如何使用 React Native 实现应用内浏览器？
- 6
如何使用 React 在浏览器中显示控制台应用程序？
- 7
使用PHP在浏览器中预览PDF文件
- 8
如何在浏览器中呈现CSS / HTML？
- 9
如何在Docusaurus中呈现浏览器
- 10
如何在浏览器中呈现CSS / HTML？
- 11
如何指示使用l20n.js在浏览器中呈现哪种语言？
- 12
如何使用Web浏览器在NoSQL数据中呈现换行符？
- 13
如何使用Jersey for Java在浏览器中呈现新的.jsp文件？
- 14
如何打开chrome：// apps中列出的浏览器应用
- 15
如何在单个浏览器窗口中预览目录中的所有图像？
- 16
浏览器预览的坐标如何映射到 PDF 文件中的坐标
- 17
如何使用“网络浏览器应用程序”？
- 18
如何使用网络浏览器的后退按钮？在Java Web应用程序中
- 19
如何使用Chrome网络驱动程序测试Chrome浏览器的打印预览？
- 20
如何在暗模式下使用Google Chrome浏览器预览PDF？
- 21
使用Ripple在浏览器中测试phonegap应用
- 22
如何在通过Rails控制器检索的浏览器中呈现PDF
- 23
如何获取Internet Explorer浏览器帮助器对象中呈现网页的窗口的HWND
- 24
在浏览器中预览IBM MobileFirst CLI创建的项目
- 25
如何在python中从python中强制执行或呈现浏览器中的脚本？
- 26
在Web浏览器中使用ReactJS预览本机视图
- 27
使用打印预览打开新的浏览器
- 28
Rails控制器在浏览器中呈现JSON
- 29
如何使用桌面应用程序的浏览器小部件在当前版本的Livecode中对浏览器的前进和后退按钮进行编程
我来说两句