相关疑难解决方法(0)

在ReactJS中是否有办法让组件找出它的父母是谁？

编辑1:无论做到这一点的优点,有没有办法？

我没有找到一种React方法来实现这一点 - 从我所看到的,我的想法是将回调传递给来自父级的子进程,并且子进程调用回调 - 不知道回调实际是在家长.

我试过设置一个"所有者"属性,这个想法似乎有效,但我想知道什么是最好的方法？

例如

<Parent>
  <Child owner={this}/>
</Parent>

然后在子组件中,我可以做owner.method,它似乎工作正常.我知道这不是真正的父/子关系,但是我在测试中发现的最接近.

有些人可能会说回调是一种更干净的方式,但是在某种情况下(例如RadioButtonGroup和RadioButton)的父/子关系看起来很自然,并且在我看来,会因为知道这种关系而受益.

编辑2:所以这不可能吗？

关于不支持它的想法,我不喜欢的是HTML可以用零javascript标记 - 它暗示了默认功能 - 一些元素需要父母 - 他们被定义为其他元素的子元素(例如ul和li).这在JSX中不可能发生,因为如果元素之间存在交互 - 必须有javascript事件将组件绑定在一起 - 每次使用它们.设计师不能简单地像语法一样编写HTML - 有人必须介入并在其中放置一些javascript绑定 - 这会使维护更加困难.我认为这个想法对于覆盖默认行为是有意义的,但是应该支持默认行为.默认情况下需要了解您的父母或您的所有者.

我以这篇文章为例(React方式),但它对我不起作用.请指出我的错误,因为我无法理解什么是错的.

这是我看到的错误:

未捕获的TypeError:this.props.onClick不是函数

这是我的代码:

// PARENT
var SendDocModal = React.createClass({
  getInitialState: function() {
    return {tagList: []};
  },
  render: function() {
    return (
      <div>
        {
          this.state.tagList.map(function(item) {
            return (
              <TagItem nameProp={item.Name} idProp={item.Id} onClick={this.HandleRemove}/>
            )
          })
        }
      </div>
    )
  },
  HandleRemove: function(c) {
    console.log('On REMOVE = ', c);
  }
});

// CHILD
var TagItem = React.createClass({
  render: function() {
    return (
      <span className="react-tagsinput-tag">
        <span>{this.props.nameProp}</span>
        <a className='react-tagsinput-remove' onClick={this.HandleRemove}></a>
      </span>
    )
  },
  HandleRemove: function() {
    this.props.onClick(this);
  }
});

提前致谢!