Немного заплутался в 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