Передача реквизита через слишком много уровней

РассмотримПередача реквизита через слишком много уровней

Parent component (prop: textColor) 
intermediate component 1 
intermediate component 2 
intermediate component N 
Component with text (needs textColor)

Как идти о избежать прохождения textColor через промежуточные компоненты явно?

Является ли это хорошим прецедентом для контекста, хотя у него есть предупреждения, которые препятствуют его использованию по разным причинам?

источник

2017-01-09 ave

Если вы используете redux, тогда храните textColor в '' 'Store''', чтобы получить из хранилища в ваш любой компонент как' '' props'''. –

@Kartik_Agarwal это правильно, но это означает, что те компоненты, которые могут получить доступ к 'store' в качестве опоры, являются контейнерами, а не репрезентативными (ака просто) компонентами. Вот почему я не решаюсь это сделать, я думаю, что те компоненты, которые находятся очень глубоко по дереву, должны быть простыми. – ave

Как Лео предложил это, используйте контекст:

class ParentComponent extends React.Component { 
    static childContextTypes = { 
     someContext: React.PropTypes.string 
    }; 

    getChildContext() { 
     return { 
      someContext: 'foo-bar' 
     }; 
    }

}

Тогда Nth компонент делает ребенок:

class NthChild extends React.Component { 
    static contextTypes = { 
     someContenxt: React.PropTypes.string 
    }; 

    render() { 
     // this.context.someContext is available here 
    } 
}

источник

2017-01-09 17:58:52 Kousha

Это лучший ответ? [Реакция документации] (https://facebook.github.io/react/docs/context.html), похоже, сильно препятствует использованию контекста. – randomsolutions

@ randomsolutions Мне действительно нужно не согласиться. «context» - это расширенная функция, и если вы знаете, что делаете, тогда это нормально. Самая большая проблема заключается в том, что это экспериментальный API, поэтому он, скорее всего, изменится. Функция Redux Connect использует контекст. См. Https://stackoverflow.com/questions/36428355/react-with-redux-what-about-the-context-issue – Kousha

Если textColor не изменяет/не входит в состояние, вы можете определить его как переменную и импортировать его по требованию.

В противном случае вы должны использовать контекст, поскольку это именно его прецедент.

В некоторых случаях, вы хотите передать данные через компонент дерева без необходимости проходить реквизит вниз вручную на каждом уровне

источник

2017-01-09 16:09:44 lustoykov

Передача реквизита через слишком много уровней

ответ

Смежные вопросы