Добавление класса другому компоненту в React

[Raadsert]

Здравствуйте.

Подскажите, как можно по клику на кнопку добавить класс какому-то другому компоненту в проекте, вне текущего компонента?

Button.js

<button onClick={handleBtn}>Клик</button>

Box.js

<div>Сюда добавить класс</div>

App.js

<Box />
<Button />

[Aetae]

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

[Nexus]

Самый простой вариант:

import React, {useState} from 'react';

function Box(props: {className?: string}) {
    return <div className={props.className}>Сюда добавить класс</div>;
}

function Button(props: {
    setBoxClassName: React.Dispatch<React.SetStateAction<string | undefined>>,
}) {
    return <button onClick={() => {
        props.setBoxClassName(w => w ? undefined : 'd-none');
    }}>Клик</button>
}

function App() {
    const [boxClassName, setBoxClassName] = useState<string | undefined>();
    
    return <>
        <Box className={boxClassName}/>
        <Button setBoxClassName="setBoxClassName"/>
    </>;
}

[Raadsert]

import React, {useState} from 'react';

function Box(props: {className?: string}) {
    return <div className={props.className}>Сюда добавить класс</div>;
}

function Button(props: {
    setBoxClassName: React.Dispatch<React.SetStateAction<string | undefined>>,
}) {
    return <button onClick={() => {
        props.setBoxClassName(w => w ? undefined : 'd-none');
    }}>Клик</button>
}

function App() {
    const [boxClassName, setBoxClassName] = useState<string | undefined>();
    
    return <>
        <Box className={boxClassName}/>
        <Button setBoxClassName="setBoxClassName"/>
    </>;
}

А в реакте не популярно присваивать классы через ref?

[Aetae]

Raadsert, нигде не "популярно". Прямая работа с DOM, т.е. element ref(и аналоги из иных фреймворков) - это крайний случай, заразервированный в основном для сторонних блиблиотек и для тех кто знает что делает. Работая в рамках фреймворка вы работаете с данными, заботу по рисованию этих данных полностью берёт на себя фреймворк; касаться DOM вне его рамок не следует.

[ksa]

А в реакте не популярно присваивать классы через ref?

Реакт это про стейт и пропсы...

[Raadsert]

Raadsert, нигде не "популярно". Прямая работа с DOM, т.е. element ref(и аналоги из иных фреймворков) - это крайний случай, заразервированный в основном для сторонних блиблиотек и для тех кто знает что делает. Работая в рамках фреймворка вы работаете с данными, заботу по рисованию этих данных полностью берёт на себя фреймворк; касаться DOM вне его рамок не следует.

Тогда ref остаётся только для чтения информации из него? Ему хоть и можно присваивать какие-то значения, но лучше этого не делать? Сильно влияет на оптимизацию?

Странно, на любых курсах рассказывают о ref как способе взаимодействия с DOM элементом.

[Aetae]

Raadsert,

Странно, на любых курсах рассказывают о ref как способе взаимодействия с DOM элементом.

Так это и есть способ взаимодействия с DOM элементом. Просто тебе не надо с ним взаимодействовать в 99.9% случаев. Если что-то можно сделать через фреймворк - это нужно сделать через фреймворк, оно там не просто так.
Дело не в какой-то там оптимизации, дело в нарушении логики фреймворка: фреймворк не ожидает, что DOM как либо изменится извне, он рассчитывает, что DOM будет в таком виде в каком он его оставил. Потому трогать DOM руками стоит только если иначе действительно никак, при этом очень осторожно и с оглядкой. В противном случае очень легко можно наплодить сложных багов.