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函数生成的任何组件访问此组件中的方法。

是否有一种方法可以将道具传递给此函数，然后将其应用于生成的任何组件？

Answer 1

您可以使用React.cloneElement为孩子添加额外的道具。假设parse.toReact返回一个字符串数组或React元素，您可以克隆每个元素并添加回调作为额外的支柱：

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>
    )
  }
}

从生成的子组件中访问父方法

1 个答案: