Question

我很抱歉这个标题可能有些令人头疼，我只是想不出如何准确地说出我的问题（对任何建议持开放态度）。

基本上有3个组件：parent，ChildA和ChildB

Parent呈现两个孩子，ChildB都有一个参考标记，Parent使用该参考标记将ChildB的函数传递给ChildA。

class Parent extends Component {
  render() {
    <ChildA openChildB={() => this.childb.open()} />
    <ChildB ref={instance => { this.childb = instance; }} />
  }
}

非常基本。

我遇到的问题是当ChildA执行该函数时，它需要传递一个参数。我似乎无法弄清楚这样做的正确方法。

我尝试使用不同的语法将函数传递给ChildA - <ChildA openChildB={this.childb.open} />

但是会导致错误Can't Read Property Of Undefined。

如何通过此函数传递变量？任何帮助将非常感谢！

编辑：我知道我可以将参数传递到Parent，然后从那里将它放在函数() => this.childb.open(arg)中，但为了组织起见，我更愿意在{{{{}}内处理1}}。

Answer 1

您可以使用以下内容：

class Parent extends Component {
  render() {
    <ChildA openChildB={(arg1) => this.childb.open(arg1)} />
    <ChildB ref={instance => { this.childb = instance; }} />
  }
}

在ChildA内，您应该确保在致电this.props.openChildB时传递相关参数：

function handleOpenOnB() {
    // This is an example, you should use the relevant value you want to pass to the openChildB function
    this.props.openChildB(this.state.val);
}

将参数onClick传递给通过refs执行的props.function（）

1 个答案: