小编Mik*_*ver的帖子

用url和类来反应img标记问题

我的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)

我有两个问题:

有任何想法吗?

javascript css reactjs

39
推荐指数
1
解决办法
13万
查看次数

是否可以在浏览器中使用webpack动态配置`publicPath`?

我有一个项目,我将相同的webpack JS包部署到多个不同的环境.有些环境使用CDN来提供像JS文件这样的静态资产,而有些环境只使用与项目其余部分相同的根提供静态资产.

这个项目还有多个异步webpack块,所以我定义了一个publicPath正确加载它们.

当部署到非cdn时,webpack publicPath在我的webpack配置中静态配置工作正常,可以提供类似的东西/static/.

但是,当部署到使用CDN的环境时,这不再适用于异步块,因为webpack将尝试访问这些,/static/这意味着他们会询问主应用服务器而不是CDN.

显然,我可以用我的CDN重新构建项目publicPath来解决这个问题.但是,我更愿意在这两种情况下只使用一个部署包.

我的服务器端应用程序提供了一个javascript全局详细说明了CDN根路径window.staticCDNRoot.而且这种全局性也出现在非cdn情况下,只是指向应用服务器 - 所以它总是解析到正确的位置来加载静态资产.

有没有什么方法可以让webpack在运行时使用它,这样publicPathwindow.staticCDNRoot + publicPath没有大的hackery?

或者这个问题有更好的解决方案吗?

javascript webpack

12
推荐指数
1
解决办法
4540
查看次数

React.js:是否可以在使用JSX引用它们的同时命名子组件?

所以假设我有一个被调用的组件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命名空间?

javascript reactjs react-jsx

8
推荐指数
1
解决办法
5887
查看次数

React路由器应用程序 - 路由标题

我正在学习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错误.

我的问题

  • 管理标题有更好的方法吗?
  • 跟踪当前页面是否有任何替代方法,而不是依赖路由渲染函数每次都将数据传递给回调(这看起来很脏)?

reactjs react-router

8
推荐指数
1
解决办法
4485
查看次数

如何通过Swift中的URLScheme捕获用于启动OSX应用程序的URL?

我一直在尝试复制通常在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调用的语法转换.但是我得到了方法的参数forEventClassandEventId参数的类型错误setEventHandler:

'NSNumber' is not a subtype of 'AEEventClass'为了forEventClass论证

和:

'NSNumber' is not a subtype of 'AEEventId'为了andEventID论证

我不知道我在做什么错在这个阶段既是kInternetEventClasskAEGetURL是由苹果定义的常量......当然我不要求他们转换NSNumber类型各自需要的类型?如果我是,我无法弄清楚如何.

macos swift xcode6

6
推荐指数
1
解决办法
1979
查看次数

Mac OSX Mavericks处理应用程序的CFBundleURLName"自定义URL"启动方式有没有改变?

我在任何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传递,但是在第二次单击已经运行时工作.

如果有人能对此有所了解,我将非常感激.

url macos custom-url osx-mavericks

5
推荐指数
1
解决办法
520
查看次数

当我尝试将react-router与webpack一起使用时,为什么会出现jsx-loader错误?

我正在尝试用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 webpack react-router

1
推荐指数
2
解决办法
9387
查看次数