0

Как передать параметры от родительского компонента к компоненту который может быть расположен как угодно глубоко?

Pie должен передать определенные параметры Slice.

 <Pie>
      <OtherComp>
      <div>
          <Slice>
          </Slice>
          <Slice>
          </Slice>
      </div>
      </OtherComp>
    </Pie>
class Pie extends Component { 

    render() {
      const { children } = this.props;

      // тут надо передать параметры color
      // которые компонент  Slice ожидает

      return (
        <g>
          {children}
        </g>
      );
    }
}




class Slice extends Component { 

    render() {
      const { color } = this.props;

      return (
        <line color={color}></line>  
         );
    }
}

2 ответа 2

1

Вообще, в таких случаях, при больших вложенностях используют redux и ему подобные конструкции. но в описанном случае лучше бы подошел reactContext например:

import React, {Component} from 'react';

export const ThemeContext = React.createContext('light');

    class Pie extends Component {

        render() {
            const {children} = this.props;
            // тут надо передать параметры color
            // которые компонент  Slice ожидает
            const color = '#FFF'
            return (
            <ThemeContext.Provider value={color}>
                <g>
                    {children}
                </g>
            </ThemeContext.Provider>);
        }
    }
    export default Pie;

ниже компонент Slice:

import React, {Component} from 'react';
import { ThemeContext } from '../Pie'

export default class Slice extends Component {
    render() {
      return (
        <ThemeContext.Consumer>
             {color=>   <line color={color}>{color}</line>  }
        </ThemeContext.Consumer>
         );
    }
}

и уже далее мы можем применять с любой вложженостью

<Pie>
      <OtherComp>
      <div>
          <Slice>
          </Slice>
          <Slice>
          </Slice>
      </div>
      </OtherComp>
    </Pie>

думаю концепция понятна. за оформление прошу понять и простить))))

0

вариантов несколько, либо прокидывать параметры от родителя через все компоненты к нужном, либо воспользоваться redux'ом, в родителе записать в стор значения и достать где нужно

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.