我的JSX文件中有以下简单的反应代码:
/** @jsx React.DOM */
var Hello = React.createClass({
render: function() {
return <div><img src='http://placehold.it/400x20&text=slide1' alt={event.title} class="img-responsive"/><span>Hello {this.props.name}</span></div>;
}
});
React.renderComponent(<Hello name="World" />, document.body);
Run Code Online (Sandbox Code Playgroud)
DOM中的输出如下:
<div data-reactid=".0">
<img src="http://placehold.it/400x20undefined1" data-reactid=".0.0">
<span data-reactid=".0.1">
<span data-reactid=".0.1.0">Hello </span>
<span data-reactid=".0.1.1">World</span>
</span>
</div>
Run Code Online (Sandbox Code Playgroud)
我有两个问题:
有任何想法吗?
我有一个项目,我将相同的webpack JS包部署到多个不同的环境.有些环境使用CDN来提供像JS文件这样的静态资产,而有些环境只使用与项目其余部分相同的根提供静态资产.
这个项目还有多个异步webpack块,所以我定义了一个publicPath
正确加载它们.
当部署到非cdn时,webpack publicPath
在我的webpack配置中静态配置工作正常,可以提供类似的东西/static/
.
但是,当部署到使用CDN的环境时,这不再适用于异步块,因为webpack将尝试访问这些,/static/
这意味着他们会询问主应用服务器而不是CDN.
显然,我可以用我的CDN重新构建项目publicPath
来解决这个问题.但是,我更愿意在这两种情况下只使用一个部署包.
我的服务器端应用程序提供了一个javascript全局详细说明了CDN根路径window.staticCDNRoot
.而且这种全局性也出现在非cdn情况下,只是指向应用服务器 - 所以它总是解析到正确的位置来加载静态资产.
有没有什么方法可以让webpack在运行时使用它,这样publicPath
就window.staticCDNRoot + publicPath
没有大的hackery?
或者这个问题有更好的解决方案吗?
所以假设我有一个被调用的组件ImageGrid
,它的定义如下:
window.ImageGrid = React.createClass({
render: function() {
return (
<div className="image-grid">
<ImageGridItem />
</div>
);
}
});
Run Code Online (Sandbox Code Playgroud)
正如你所看到的,它包含了一个名为的反应组件ImageGridItem
.其定义如下.
window.ImageGridItem = React.createClass({
render: function() {
return (
<div className="item-container">something</div>
);
}
});
Run Code Online (Sandbox Code Playgroud)
只要两者都是直接属性,这样就可以正常工作window
.但这有点可怕,所以我想把我所有的反应组件分组到window.myComponents
例如命名空间下.
所以定义改为:
window.myComponents.ImageGrid = React.createClass({...});
window.myComponents.ImageGridItem = React.createClass({...});
Run Code Online (Sandbox Code Playgroud)
现在的问题是,在它的render()函数中ImageGrid
引用<ImageGridItem />
,它的JS版本被编译到JS ImageGridItem()
,当然这是未定义的,因为它现在实际上myComponents.ImageGridItem()
并且反应抱怨它无法找到它.
是的我知道我不能为那个组件编写JSX并手动执行myComponents.ImageGridItem({attr: 'val'})
但是我更喜欢使用JSX html语法快捷方式,因为它更容易阅读和开发.
有什么方法可以让这个仍然使用<ImageGridItem />
儿童的语法吗?如果没有,是否可以在JSX中定义JS命名空间?
我正在学习React并使用React-router.我正在构建的应用程序是一个移动风格的应用程序,顶部导航菜单和下面的内容部分.当我浏览应用页面时,我想在菜单栏中添加一个页面"标题",以确定您当前所在的页面.
我的路线:
<Routes>
<Route name='home' path='/' handler={HomePage}>
<Route name='product-list' path='products/' handler={ProductList}/>
<Route name='product-detail' path='product/:slug/' handler={ProductDetail} addHandlerKey={true}/>
</Route>
</Routes>
Run Code Online (Sandbox Code Playgroud)
HomePage.render:
<div className="container">
<NavigationMenu />
<div className="contents">
{this.props.activeRouteHandler()}
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
NavigationMenu.render:
<div className="navigationMenu">
<div className="navigationMenuTitle>{this.props.title}</div>
</div>
Run Code Online (Sandbox Code Playgroud)
到HomePage的子路由需要根据Ajax调用返回的内容设置其标题.
我原本想过为每条路线添加回调,将标题传递回父类,而父类又可以将这些数据传递给NavigationMenu.不幸的是,这不起作用:当您浏览页面时,重复调用的唯一函数是渲染,此处设置状态会引发Invariant Violation
错误.
我一直在尝试复制通常在Objective-c中使用swift进行此操作的方法,以便我正在玩一个新的快速应用程序.
如何在Objective-c中执行此操作setEventHandler
已有详细记录,您将获得共享的apple事件管理器和调用方法,以将事件注册为kInternetEventClass
具有事件ID 的事件类的处理程序kAEGetURL
.
所以在swift中我试图用这个代码添加到一个全新项目中的模板AppDelegate.swift中做同样的事情:
func applicationWillFinishLaunching(aNotification: NSNotification?) {
var appleEventManager:NSAppleEventManager = NSAppleEventManager.sharedAppleEventManager()
appleEventManager.setEventHandler(self, andSelector: "handleGetURLEvent:withReplyEvent:", forEventClass: kInternetEventClass, andEventID: kAEGetURL)
}
func handleGetURLEvent(event: NSAppleEventDescriptor?, replyEvent: NSAppleEventDescriptor?) {
println("yay");
}
Run Code Online (Sandbox Code Playgroud)
据我所知,这只是标准Objective-c调用的语法转换.但是我得到了方法的参数forEventClass
和andEventId
参数的类型错误setEventHandler
:
'NSNumber' is not a subtype of 'AEEventClass'
为了forEventClass
论证
和:
'NSNumber' is not a subtype of 'AEEventId'
为了andEventID
论证
我不知道我在做什么错在这个阶段既是kInternetEventClass
和kAEGetURL
是由苹果定义的常量......当然我不要求他们转换NSNumber
类型各自需要的类型?如果我是,我无法弄清楚如何.
我在任何OSX浏览器中创建了一个从自定义URL启动的应用程序.通过向应用程序的plist添加标准CFBundleURLName条目,这可以正常工作.
我的应用程序通过解析自定义URL上的一些参数然后对它们做出反应来阅读.
例如,使用自定义网址:
foobar://param1/param2/param3
在浏览器中单击上面的URL时,OSX会启动我的应用程序并将实际的自定义URL本身作为应用程序的第一个参数传递.因此,在应用程序中,我可以读取第一个arg并获取打开应用程序的URL,并解析它我需要的参数.
这在OSX 10.5-10.8中运行良好,但在10.9 Mavericks中它的工作方式略有不同.即,如果应用程序尚未运行,它仍会启动应用程序,但不会将自定义URL作为第一个参数传递 - 因此应用程序认为它刚刚由用户手动启动(例如从启动板选择)而不是直接从一个浏览器.
奇怪的是,如果应用程序已经打开,那么单击自定义URL会将url字符串发送到应用程序作为第一个参数,应用程序中的功能按预期发生.
我已经使用我的应用程序的新旧版本在10.6-> 10.9上测试了这一点,并且都表现出相同的行为.在10.9 Mavericks之前的版本首次发布时都可以正常工作,但是在10.9中,他们没有将url作为第一个arg传递,但是在第二次单击已经运行时工作.
如果有人能对此有所了解,我将非常感激.
我正在尝试用webpack
和组合一个简单的项目react-router
.当我不使用时react-router
,一切正常.这是我的代码:
/** @jsx React.DOM */
var React = require('react');
React.renderComponent(
<h1>Hello World</h1>,
document.body
);
Run Code Online (Sandbox Code Playgroud)
这是我的重要部分webpack.config.js
:
module: {
loaders: [
{ test: /\.css$/, loader: 'style!css'},
{ test: /\.js$/, loader: 'jsx-loader' }
]
}
Run Code Online (Sandbox Code Playgroud)
但是当我添加require('react-router')
到我的js
文件时,我收到此错误:
ERROR in (webpack)/~/node-libs-browser/~/buffer/index.js
Module not found: Error: Cannot resolve module 'jsx-loader' in /usr/local/lib/node_modules/webpack/node_modules/node-libs-browser/node_modules/buffer
@ (webpack)/~/node-libs-browser/~/buffer/index.js 1:0-106
Run Code Online (Sandbox Code Playgroud)
有没有人见过这个错误?我究竟做错了什么?
reactjs ×4
javascript ×3
macos ×2
react-router ×2
webpack ×2
css ×1
custom-url ×1
react-jsx ×1
swift ×1
url ×1
xcode6 ×1