Как спроектировать дашборд в react?

Немного заплутался в React)
Суть вопроса - пытаюсь построить дашборд в реакте. Есть компоненты - App, Block и несколько компонентов разного содержания, назовем их Content.
Block - просто бутстраповская карточка, приглаженная css, в которую можно передать title, классы и некоторые свойства.
В App я укладываю несколько компонентов Block, в которые в качестве пропсов передаю компоненты Content.
Но некоторые компоненты могут влиять на поведение Block (добавлять классы, например).
На данный момент это делается с помощью стейтов, объявленных в App и способных перерендерить компонент Block.

Но такой подход кажется мне неправильным. Хотелось бы в самом Block передавать SetState дочерним компонентам, но модифицировать пропсы вроде как нельзя. Пытался использовать Context но и тут не смог корректно его реализовать. Вызывать в каждом Content компоненте компонент Block - как-то не по DRY.

Какой оптимальный подход при проектировании подобных приложений, где есть один компонент-обертка, в который внутри основного приложения укладывается разный контент?

function App() {
 return (
  <div>
   <Block
    id="users-component"
    title="Users Table"
    classes=[]
    content={
     <MyTable class="users" />
    }
   />

   <Block
    id="status-component"
    title="Status Component"
    classes=[]
    content={
     <Status class="status" />
    }
   />

   <Block
    id="bdays-component"
    title="Bdays Component"
    classes=[]
    content={
     <Bdays class="bdays" />
    }
   />
  </div>
  
 )
}

function Block(props) {
 return (
  <div id={props.id} className={props.classes.join(" ")}>
   <h2>{props.title}</h2>
   {props.content}
  </div>
 )
}

function MyTable(props) {
 return (
  <table className={props.class}></table>
)
}

function Status(props) {
 const handleClick = (title) => {
  changeTitle(title)     // меняем title в родителе (Block)
 }
 return (
  <div className={props.class}>
   <button onClick={() => handleClick("newTitle")}>New Title</button>
  </div>
)
}

function Bdays(props) {
 const handleClick = (class) => {
  addNewClass(class)     // добавляем значение в массив classes в его родительском компоненте Block
 }
 return (
  <div className={props.class}>
   <button onClick={() => handleClick("newClass")}>New Class</button>
  </div>
)
}


P.S. Добавил пример. Хочется понять, как пробрасывать changeTitle и addNewClass в Block, минуя App
  • Вопрос задан
  • 97 просмотров
Пригласить эксперта
Ответы на вопрос 1
А почему бы мелким компонентам не вызвать хэндлер в Block? А Block будет читать пришедшие из дочернего элемента данные и на их основе "добавлять кассы, например"?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы