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'ом, в родителе записать в стор значения и достать где нужно

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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