Question

我正在尝试使用引用访问嵌套的冷组件中的方法。这是为了删除嵌套删除组件中的数据。我的代码如下（简化代码）：

父级：

class Parent extends Component {
  constructor(props) {
    this.childref = React.createRef()
    props.refs(this)
  }
  render() {
    const elements = return [
     <div onclick={this.callsupprimer(0)} />,
     <div onclick={this.callsupprimer(1)} />
    ]
    return (
      <Fragment>
        <Child refs={ref => this.childref = ref>
        </Child>
       loadToolData()
     </Fragment>
     )
  }
  callsupprimer = index => this.childRef.GrandChildRef.supprimer(index)
}
 export withStyles(styles)(Parent)

儿童班：

class Child extends Component {
  constructor(props) {
    this.grandchildref = React.createRef()
    props.refs(this)
  }

  render() {
    return (
      <GrandChild refs={ref => this.grandchildref = ref>
      </GrandChild>
    )
  }
}
 export withStyles(styles)(Child)

孙子班级：

class GrandChild extends Component {

  supprimer = (index) => {
        console.log(index)
        this.forceUpdate()
  }
  render() {
    return (
      //blah blah blah
    )
  }
}
export withStyles(styles)(GrandChild)

但是，我无法获得supprimer方法来调用GrandChild的此上下文中的更改。该方法被调用，但是以一种奇怪的方式。

在加载组件并打印索引时调用一次，但是在onlick上不起作用！我什至没有在grandChild类中调用此方法。请帮忙。

更新：除了方法名称外，代码与编写的完全相同。

Answer 1

问题是我在渲染时调用了callsupprimer，而本来应该只在onClick上调用过，所以该方法在渲染时被调用一次，此后不起作用。将父类中的onClick更改为箭头函数回调后：

<div onclick={() => this.callsupprimer(1)} />

它按预期工作。

NB ：使用withstyles时，您需要使用ref（而不是ref），然后将其绑定到子组件中，如问题所示。我不需要使用current。 @Hai Alaluf在问题中的评论以正确的方式向我指出了！

使用refs reactJS WithStyles调用嵌套的子方法

1 个答案: