标签: components

tl; dr:基本上我想将Angular ngOnDestroy与Rxjs takeUntil()运算符结合起来. - 那可能吗？

我有一个Angular组件,可以打开几个Rxjs订阅.当组件被销毁时,需要关闭它们.

一个简单的解决方案是:

class myComponent {

  private subscriptionA;
  private subscriptionB;
  private subscriptionC;

  constructor(
    private serviceA: ServiceA,
    private serviceB: ServiceB,
    private serviceC: ServiceC) {}

  ngOnInit() {
    this.subscriptionA = this.serviceA.subscribe(...);
    this.subscriptionB = this.serviceB.subscribe(...);
    this.subscriptionC = this.serviceC.subscribe(...);
  }

  ngOnDestroy() {
    this.subscriptionA.unsubscribe();
    this.subscriptionB.unsubscribe();
    this.subscriptionC.unsubscribe();
  }

}

这有效,但有点多余.我特别不喜欢那样 - 这unsubscribe()是其他地方,所以你必须记住这些是相互关联的. - 组件状态受订阅污染.

我更喜欢使用takeUntil()运算符或类似的东西,使它看起来像这样:

class myComponent {

  constructor(
    private serviceA: ServiceA,
    private serviceB: ServiceB,
    private serviceC: ServiceC) {}

  ngOnInit() {
    const destroy = Observable.fromEvent(???).first();
    this.subscriptionA …

我试图了解React的有状态和无状态组件之间的确切区别.好吧,无状态组件只是做某事,但没有记住任何事情,而有状态组件可能会做同样的事情,但他们会记住内部的东西this.state.这就是理论.

但现在,检查如何使用代码显示这一点,我有点麻烦有所作为.我是对的,有以下两个例子吗？唯一的区别是getInitialState函数的定义.

无状态组件的示例:

var React = require('react');

var Header = React.createClass({
    render: function() {
        return(
            <img src={'mypicture.png'} />
        );
    }
});

module.exports = Header;

有状态组件的示例:

var React = require('react');

var Header = React.createClass({

    getInitialState: function() {
        return {
            someVariable: "I remember something"
        };
    },

    render: function() {
        return(
            <img src={'mypicture.png'} />
        );
    }
});

module.exports = Header;

我有一个场景,我将数据从reducer传递到我的反应状态.

数据:

{
    "id": 1,
    "title": "Test",
    "content": {
        "body": "sdfsdf"
        "image": "http://example.com"
    }
}

使用componentWillRecieveProps,这非常适合检索标题.

componentWillReceiveProps(nextProps) {
    this.setState({
        title: nextProps.blog.title,
    })
}

但是,我在检索嵌套字段时遇到了困难.当我这样做:

componentWillReceiveProps(nextProps) {
    console.log("new title is", nextProps.blog.title);
    console.log("new body content is", nextProps.blog.content["body"]);
    this.setState({
        title: nextProps.blog.title,
        body: nextProps.blog.content["body"]
    })
}

我收到此错误:

单击调试器并加载内容后,未定义主体的错误消失.无论如何我能解决这个问题吗？

我试着像这样检查undefined:

if (typeof nextProps.blog.content["body"] != 'undefined'){

但这也不起作用,我相信这是因为博客未定义.

模块与组件设计有什么区别？

我提到WPF中没有标准的忙控制.那么,在加载页面时,显示动画繁忙圈(不是进度条)的最简单方法是什么,例如浏览器显示？

如果你建议从互联网下载控制,请确保这个控件是免费的,没有许可限制(如果我使用它,我将被迫使用GPL我的应用程序).

先感谢您

我对Android中的ComponentName类有点困惑.

有不同的方法来获取组件名称对象,但我不知道何时使用哪个...以及为什么!

例:

• 申请包是 de.zordid.sampleapp
• 但是widget提供者类是 de.zordid.sampleapp.widget.WidgetProvider

运用

ComponentName cn = new ComponentName("de.zordid.sampleapp.widget",
    "WidgetProvider");

我得到了这个组件信息:ComponentInfo{de.zordid.sampleapp.widget/WidgetProvider},但我无法使用它 - 组件未知!但是JavaDoc说我应该给那个包中的包和类 - 这就是我做的,不是吗？

运用

ComponentName cn = new ComponentName(context, WidgetProvider.class);

产量ComponentInfo{de.zordid.sampleapp/de.zordid.sampleapp.widget.WidgetProvider}- 而且工作正常!!

甚至还有另一种获取ComponentName的方法 - 通过上下文和字符串.应该在何时何地使用哪一个？

谢谢!

我有一个组件将联系人对象存储为状态 - {firstName:"John",lastName:"Doe",phone:"1234567890}我想创建一个表单来编辑这个对象,但是如果我希望输入保存值原始的联系参数,我需要使每个输入成为受控组件.但是,我不知道如何创建一个handleChange函数来调整每个参数,因为我的状态只保存{contact:{...}}.以下是我目前的情况 -

  getInitialState: function () {
    return ({contact: {}});
  },
  handleChange: function (event) {
    this.setState({contact: event.target.value });
  },
  render: function () {
    return (
        <div>
          <input type="text" onChange={this.handleChange} value={this.state.contact.firstName}/>
          <input type="text" onChange={this.handleChange} value={this.state.contact.lastName}/>
          <input type="text" onChange={this.handleChange} value={this.state.contact.lastName}/>
        </div>
      );
    }

我希望在我的处理中改变我可以做的事情

  handleChange: function (event) {
    this.setState({contact.firstName: event.target.value });
  }

问题:我有很多小辅助函数,它们不一定需要存在于一个组件中(或者可能它们可以但是它们会使该组件膨胀很多代码).我懒惰的一方只是想让那些全部只是某些组件可以调用的全局函数.我真的想要制作好的ReactJs代码.

问题:Reactjs中全局帮助函数的最佳实践是什么？我应该强迫它们进入某种组件还是将它们推入其他组件？

基本示例:

function helperfunction1(a, b) {
    //does some work
    return someValue;
}

function helperfunction2(c, d) {
    //does some work
    return someOtherValue;
}

function helperfunction3(e, f) {
    //does some work
    return anotherValue;
}

function helperfunction4(a, c) {
    //does some work
    return someValueAgain;
}


var SomeComponent =
    React.createClass({

        //Has bunch of methods

        //Uses some helper functions

        render: function () {

        }

    });

var SomeOtherComponent =
    React.createClass({

        //Has bunch of methods

        //Uses some helper functions

        render: function () {

        }

    });

你知道可以自己使用组件吗？如果是的话,在哪里阅读它？

我有下一个情况:有mainItems列表,每个Main Item都有subItem(看起来像mainItem),每个subItem都可以拥有它自己的subItem等.所以最好使用嵌套,但是如何？

我想知道如何从角度4的输入中获取值.我查看了有关角度的文档,关键事件的示例对我来说效果不好,我找不到合适的示例如何这样做,请帮助我

问题:我尝试读取输入的值,然后将值提交给另一个组件,该组件将值添加到选择标记(例如,将人员的姓名发送到选择标记的列表)