小编nic*_*las的帖子

是否可以将SVG标记嵌入到ReactJS组件中？

render: function() {
  return (
    <span>
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmln ...
    </span>
  );
}

导致错误:

不支持命名空间属性.ReactJSX不是XML.

这样做最轻的方法是什么.使用像React ART这样的东西对我正在尝试做的事情来说太过分了.

这可能是在回答问题和固执己见之间的那条线,但我会来回顾如何构建ReactJS组件,因为复杂性增加并且可以使用某些方向.

来自AngularJS,我希望将我的模型作为属性传递给组件,并让组件直接修改模型.或者我应该将模型拆分为各种state属性,并在向上游发送时将其重新编译回来？什么是ReactJS方式？

以博客文章编辑器为例.试图直接修改模型最终看起来像:

var PostEditor = React.createClass({
  updateText: function(e) {
    var text = e.target.value;
    this.props.post.text = text;
    this.forceUpdate();
  },
  render: function() {
    return (
      <input value={this.props.post.text} onChange={this.updateText}/>
      <button onClick={this.props.post.save}/>Save</button>
    );
  }
});

这似乎不对.

是否更多是React方法来创建我们的text模型属性state,并在保存之前将其编译回模型:

var PostEditor = React.createClass({
  getInitialState: function() {
    return {
      text: ""
    };
  },
  componentWillMount: function() {
    this.setState({
      text: this.props.post.text
    });
  },
  updateText: function(e) {
    this.setState({
      text: e.target.value
    });
  },
  savePost: function() {
    this.props.post.text = this.state.text;
    this.props.post.save();
  },
  render: function() { …

我如何在React Native中将一种颜色的动画设置为另一种颜色.我发现通过插入Animated.Value,您可以通过以下方式设置颜色的动画:

var BLACK = 0;
var RED = 1;
var BLUE = 2;

backgroundColor: this.state.color.interpolate({
  inputRange: [BLACK, RED, BLUE],
  outputRange: ['rgb(0, 0, 0)', 'rgb(255, 0, 0)', 'rgb(0, 0, 255)']
})

和

Animated.timing(this.state.color, {toValue: RED}).start();

但是使用这种方法,从BLACK到BLUE,你必须经历红色.添加更多颜色混合,你最终在20世纪80年代的迪斯科舞厅.

有没有另一种方法可以让你直接从一种颜色到另一种颜色？

是否有任何方法将数据附加到jQuery事件对象,因为它传播到DOM？

为了澄清,如果你有三个嵌套的div,每个div都有一个click事件监听器,那么点击最里面的div会导致从最里面到最外面调用所有三个处理程序(事件传播101).我想要做的是在每个处理程序中向事件对象添加一些数据,这些数据库可供下一层访问.

我怎么做？

我正在尝试在React Native中嵌套ScrollViews; 带有嵌套垂直滚动的水平滚动.

这是一个例子:

var Test = React.createClass({
    render: function() {
        return (
            <ScrollView
                style={{width:320, height:568}}
                horizontal={true}
                pagingEnabled={true}>

                {times(3, (i) => {
                    return (
                        <View style={{width:320, height:568}}>

                            <ScrollView>
                                {times(20, (j) => {
                                    return (
                                        <View style={{width:320, height:100, backgroundColor:randomColor()}}/>
                                    );
                                })}
                            </ScrollView>

                        </View>
                    );
                })}

            </ScrollView>
        );
    },
});

AppRegistry.registerComponent('MyApp', () => Test);

外部卷轴可以完美地工作,但是当它在移动时触摸它时,内部卷轴会粘住.我的意思是:如果你滚动,抬起你的手指,当它仍然以动量移动时再次触摸它,它停止并且根本不会对触摸动作做出反应.要滚动更多,您必须抬起手指再次触摸.

这是如此可重复,感觉与手势响应器有关.

有没有人见过这个问题？

我怎么会开始调试这个？有没有办法看到什么响应触摸,授予和释放,什么时候？

谢谢.

更新:

看起来它是响应者系统,通过将onResponderMove侦听器放在内部和外部滚动器上:

<ScrollView 
    onResponderMove={()=>{console.log('outer responding');}}
    ...

    <ScrollView
        onResponderMove={()=>{console.log('inner responding');}}>
        ...

很明显,外部ScrollView正在抓住控制权.我想,问题是如何在尝试垂直滚动时阻止外部滚动条控制？为什么只有在您尝试滚动已经移动的内部ScrollView时才会发生这种情况？

我可能会完全倒退,但我正在尝试制作三个嵌套指令,让我们调用它们:屏幕,组件和小部件.我希望widget能够触发组件中的某些行为,从而触发屏幕中的某些行为.所以:

.directive('screen', function() {
    return {
        scope: true,
        controller: function() {
            this.doSomethingScreeny = function() {
                alert("screeny!");
            }
        }
    }
})

.directive('component', function() {
    return {
        scope: true,
        controller: function() {
            this.componentFunction = function() {
                WHAT.doSomethingScreeny();
            }
        }
    }
})

.directive('widget', function() {
    return {
        scope: true,
        require: "^component",
        link: function(scope, element, attrs, componentCtrl) {
            scope.widgetIt = function() {
                componentCtrl.componentFunction();
            };
        }
    }
})

<div screen>
    <div component>
        <div widget>
            <button ng-click="widgetIt()">Woo Hoo</button>
        </div>
    </div>
</div>

我可以在小部件的链接fn中使用父组件require: "^component",但是如何进一步让组件控制器访问其包含的屏幕？

我需要的是组件中的内容,因此当您单击小部件的按钮时,它会提醒"screeny!". …

fastclick是否适用于ReactJS的事件系统？在通过Cordova进入iOS或Android时似乎没有采取任何措施.如果没有,是否有另一种获得相同结果的方法.我的应用程序没有双击功能,所以如果可能的话,我想全面消除这种延迟......

也许我疯了,或者习惯于KnockoutJS,但我一直在文档中寻找一个ngWith指令来定义元素,控制器或包含(ngInclude)部分的范围.

例如:

我想编写一个增强MyItem的控制器,如:

MyModule.controller('MyItemCtrl', function($scope) {
    $scope.doSomethingToItem = function() {
        $scope.name = "bar";
    };
});

或MyItem的视图/模板,如:

<div ng-controller="MyItemCtrl">
    {{name}}
    <button ng-click="doSomethingWithItem()">Do Something</button>
</div>

但在这两种情况下,我都在想象我的范围是从我的模型继承原型,MyItem.

但范围不继承模型!!

哪个让我感到困惑.

相反,我的模型是范围上的属性.

在转发器的情况下:

<div ng-repeat="item in list">
    <div ng-controller="MyItemCtrl">
        {{item.name}}
        <button ng-click="doSomethingWithItem()">Do Something</button>
    </div>
</div>

这意味着我必须使用item.this或item.that代替只是this和that.我必须记住哪些函数是模型的原生函数,哪些函数由控制器直接应用于作用域.

如果我想部分显示名称(愚蠢的例子,我知道,但你明白了):

<h3>{{name}}</h3>

我必须写它

<h3>{{item.name}}</h3>

然后确保模型始终是项目.通常通过将其包装在指令中来简单地定义具有item属性的范围.

我经常想要做的事情就是:

<div ng-include="'my/partial.html'" ng-with="item"></div>

要么

<div ng-repeat="list" ng-controller="MyItemCtrl">            
    {{name}}
    <button ng-click="doSomethingWithItem()">Do Something</button>
</div>

那里有一些我没有找到的神奇指令吗？或者我完全错了,只是找麻烦？ …

是否可以使用requireJS"需要"整个文件夹.

例如,我有一个行为文件夹,其中包含大量行为js文件.我真的希望能够简单地使用require(['behavior/*'],function(){...}); 加载该文件夹中的所有内容,而不是必须使该列表保持最新.一旦压缩和优化,我就会把所有这些文件放在一起,但是对于开发来说,单独使用它们会更容易.

我一直在关注MVVM模式,特别是knockoutjs,而且大多只是让我感到畏缩.对于保持结构,演示和显示分开的好处,我不会长时间咆哮,我只想问(作为一个例子):有什么区别

<button data-bind="click: someJavaScriptFunction">Something</button>

和

<button onclick="someJavaScriptFunction();">Something</button>

我们应该在标记中加入如此多的行为控制吗？尽管这很简洁,但它似乎违背了我所听过的每一个网络编程原则.

我错了吗？