имея доступ к родительскому состоянию из props.children компонента:

Я делаю контейнер для линейного графика d3, который я собираюсь создать, пока мой формат таков:

import React from "react";
import AnalyticPads from "../AnalyticPad/AnalyticPad";
import Pad from "../AnalyticPad/Pad";
import MainContent from "../AnalyticPad/MainContent";
import Extention from "../AnalyticPad/Extention";



const GraphPad = () => {

    return ( 
        <AnalyticPads properties={{height: "200px"}}>
            <Pad>
                <MainContent>

                </MainContent>
                <Extention>

                </Extention>
            </Pad>
        </AnalyticPads>
    )

}

export default GraphPad;

А мой «Аналитический блокнот» выглядит так:

import React from "react";

const AnalyticPads = (props) => {

    return ( 

       <div className="analytic-pad-container">
            {props.children}
       </div>
    )

}

export default AnalyticPads;

Я хочу, чтобы была сетка «Pads», и я хочу, чтобы этот «AnalyticsPad» предоставлял стили по умолчанию для каждого блока, например, если я хочу, чтобы каждый блок имел высоту 200 пикселей, я устанавливаю его в этой оболочке, а затем для любого отдельного пэда, который я хочу отличаться от значения по умолчанию, я могу переопределить его.

Компонент «MainContent» — это место, где будет линейный график, а любая дополнительная информация будет помещена внутрь «Расширения», которое будет отображаться при нажатии кнопки.

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

Что лучше всего?

пожалуйста, не отвечайте с решением для компонентов класса, поскольку я никогда не использовал их раньше, поскольку я новичок в реагировании.


reactjs javascript react-state
person jake_prentice    schedule 19.05.2020    source источник
comment
Посмотрите на реакцию-редукс   -  person BENARD Patrick    schedule 19.05.2020
comment
@BENARD Патрик, когда я смотрел несколько видео на YouTube о редуксе, я чувствовал, что установка слишком длинная и утомительная для таких мелочей, поэтому я никогда не пытался ее изучить.   -  person jake_prentice    schedule 19.05.2020
comment
Это из-за того, что видео долго смотреть... Просто прочитайте туто, намного короче и быстрее... redux .js.org/basics/example   -  person BENARD Patrick    schedule 19.05.2020
comment
извините, если это глупый вопрос, но контекст API не делает то же самое, что и редукс :)   -  person jake_prentice    schedule 19.05.2020
comment
не глупо, и после, как вы меняете контекст от детей ? Redux — это круто, но это один из способов изменить контекст от детей сложнее, чем реализация редукционной архитектуры. Сделайте это один раз, второй и третий будет легко, обещаю, вам понравится.   -  person BENARD Patrick    schedule 19.05.2020
comment
Хорошо, я попробую, является ли структура моих компонентов хорошим способом решения проблемы или вы сделали бы это по-другому...   -  person jake_prentice    schedule 19.05.2020
comment
В вашем основном компоненте будут извлечены свойства... Они будут в состоянии редуктора. В компоненте, который будет устанавливать свойства, вы вызовете действие редукции, которое изменит состояние редукции. Другой компонент, которому нужны эти свойства, будет подключен к избыточности... Таким образом, свойства будут подключены как каждый компонент, который в них нуждается.   -  person BENARD Patrick    schedule 19.05.2020