javascript - React 从生成的子组件访问父方法

Question

我是 React 的新手，所以我不知道我想要的东西是否可行。

考虑以下 React 组件:

export default class BBCode extends Component {
  render () {
    return (
      <div>
        {parser.toReact(this.props.content.content)}
      </div>
    )
  }
}

我正在使用一个库，该库将包含 bb 代码的字符串呈现给 html 标签，在某些情况下还会呈现 React 组件。这是由函数 {parser.toReact} 完成的。

我想通过 parser.toReact 函数生成的任何组件访问此组件中的方法。

有没有办法将 prop 传递给此函数，然后将其应用于生成的任何组件？

Answer 1

您可以使用 React.cloneElement 为 child 附加额外的 Prop .假设 parse.toReact 返回一个字符串数组或 React 元素，您可以克隆每个元素并将回调添加为附加 Prop :

export default class BBCode extends Component {
  render () {
    // every React element will receive `myCustomCallback` as a prop
    const elements = parser
      .toReact(this.props.content.content)
      .map(elem => React.isValidElement(elem)
        ? React.cloneElement(elem, {
            myCustomCallback: this.myCustomCallback
          })
        : elem
      );

    return (
      <div>
        {elements}
      </div>
    )
  }
}