0

Кто знает в чем может быть проблема? Решил отображать компоненты по клику кнопки, если нажали на кнопку, то выводится компонент GroupList, иначе остается SelectGroup.


В этом компоненте делаю проверку и принимаю значение для проверки. Вывожу GroupList, если true и SelectGroup, если false. Значение принимаются через пропсы.

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>
 <React.Fragment>
import GroupList from "./GroupList";
import SelectGroup from "./SelectGroup";

function Timetable(props: {isSelect: boolean}) {
    const isSelect = props.isSelect

    return isSelect ? <GroupList /> : <SelectGroup />
}
</React.Fragment>

Эта функция вызывается, когда прожимается кнопка и если ее прожали, то isSelect изменяется на true и должен выводиться компонент GroupList. Но когда нажимают на кнопку, то в консоли пишется текст, но компонент не выводится. ЗАРАНЕЕ СПАСИБО!!!!

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>
 <React.Fragment>
function handleClick (e:any) {
    <Timetable isSelect={true} />
    console.log(e.currentTarget.textContent)
}
</React.Fragment>

2

1 ответ 1

1

Как иллюстрация твоей идеи...

const App = _ => {
    const [slct, setSlct] = React.useState(true);

    return (
        <div>
            <button onClick={_ =>setSlct(!slct)}>Переключить</button>
            {slct ? <GroupList /> : <SelectGroup />}
        </div>
    )
};

//
function GroupList() {
    return <p>GroupList</p>
}

//
function SelectGroup() {
    return <p>SelectGroup</p>
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>

<div id='root'></div>

4
  • это бы помогло, если бы я обрабатывал клик в App, но мне нужно обработать клик в SelectGroup и передать значение в Timetable, но у меня есть роутинг, где я роутю Timetable условно ставлю ему атрибут с пропсом, чтобы не выдавало ошибку. И атрибут в роутинге в приоритете, поэтому вызов Timetable в SelectGroup тупо не обрабатывается. Есть идея как пофиксить? Буду очень благодарен
    – Fionitos
    21 янв в 19:54
  • @Fionitos, вместо объяснений просто сделай тестовый пример на основе моего - я тебе покажу как такое можно реализовать. Как рассказ могу тебе сказать что одному нужно передать функцию изменения, а другому собственно стейтовое значение. Подробности уже на твоем тестовом примере...
    – ksa
    21 янв в 22:01
  • я скинул тест пример
    – Fionitos
    22 янв в 13:43
  • есть идеи ?????
    – Fionitos
    24 янв в 12:31

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.