ネストされた子コンポーネントから反応中のマップ

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要素を見つけてそれにカスタムの小道具を追加する方法が必要です。

追加したい小道具はonLoad = {this.onHandleLoad}ですので、正しいスコープで写真内のonHandleLoadを呼び出します。

私はReact.Children.mapを見てきましたが、最初の要素だけを返し、入れ子の要素は返しません。 imgは1レベルダウン以上になる可能性があります。 どうすればいいですか？再帰マッピングを検討していましたが、確かに行く方法はありません。これを処理するメソッドが組み込まれていますか？

Answer 1

これを行う最善の方法は、reduxのようなものを使用して、すべての画像負荷に対してアクションをディスパッチすることです。しかし、現在使用していない場合は、多くのリファクタリングが必要になります。

contextはかなりよくここに収まる別の方法があります。 many warnings about using contextがありますが、コールバックを提供しているだけなので、リスクはあまりありません。

コンテキストを使用すると、親コンポーネントがコールバックをいくつでもレベルを下げることができます。各コンポーネントを介して小道具を渡す必要はありません。

-

まず自分の親コンポーネントに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> 
    ) 
    } 
} 

次にあなたがcontextTypesを使って、親コンテキストにフックするあなたの<img>の周りの子コンポーネントのラッパーが必要になります。

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