reactjs - 通过 react 中的嵌套子组件进行映射

Question

我正在尝试向顶级组件中的嵌套子元素添加新属性。

我的更高级别组件称为 Photo.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';

export default class Photo extends Component{

  constructor(props){
    super(props);
    this.onHandleLoad = this.onHandleLoad.bind(this);

    this.state = {
      isLoaded:false
    }
  }

  onHandleLoad(event){
    this.setState({
      isLoaded:true
    })
  }

  render(){
    const {children} = this.props;
    return(
      <div className="photo-container">
        {children}
      </div>
    )
  }
}

这是我向其中添加子项的方法。

   <Photo >
      <Link to='/bla' className="slide-show-link">
        <img src={photo.photo} alt={`${photo.title} photo`}/>
      </Link>
    </Photo>

添加的子项并不总是相同。有时嵌套可能会有更多级别，但它总是有一个 img 元素。我想要一种能够映射所有嵌套元素并找到 img 元素并向其添加自定义 Prop 的方法。

我要添加的属性是 onLoad={this.onHandleLoad)，因此它将在正确的范围内调用 Photo 内的 onHandleLoad。

我查看了 React.Children.map 但它只返回第一个元素，而不返回嵌套元素。 img 可能会下降 1 级或更多。我怎样才能做到这一点。正在研究递归映射，但不确定这就是要走的路。是否有内置方法可以处理这个问题？

Answer 1

最好的方法可能是使用 redux 之类的东西并为每个图像加载分派(dispatch)一个操作。但如果您当前没有使用它，则需要进行大量重构。

还有另一种方式非常适合这里，即 context 。有many warnings about using context ，但由于您只提供回调，因此风险不大。

Context 将允许您的父组件将回调传递到任意数量的级别，而无需逐级传递 props。

-

首先添加childContextTypes和getChildContext到您的父组件:

export default class Photo extends Component {
  static childContextTypes = {
    onHandleLoad: PropTypes.func
  };

  constructor(props) {
    super(props);

    this.state = {
      isLoaded: false
    }
  }

  getChildContext() {
    return {
      onHandleLoad: this.onHandleLoad
    };
  }

  onHandleLoad = (event) => {
    this.setState({
      isLoaded: true
    })
  }

  render() {
    const {children} = this.props;
    return(
      <div className="photo-container">
        {children}
      </div>
    )
  }
}

然后你需要一个子组件包装器来包裹你的 <img>通过使用 contextTypes Hook 到父上下文:

class PhotoImage extends Component {
  static contextTypes = {
    onHandleLoad: PropTypes.func
  }

  static propTypes = {
    photo: PropTypes.string,
    title: PropTypes.string
  }

  render() {
    return (
      <img
        src={photo}
        alt={`${title} photo`}
        onLoad={this.context.onHandleLoad}
      />
    )
  }
}