Как передать в параметр функции кнопку, чтобы при вызове функции она отображалась React JS?

Рейтинг: 2Ответов: 1Опубликовано: 26.07.2023

Хочу сделать такую фичу: при переключении разных диаграмм в меню для работы с ними необходимо скрыть некоторые кнопки. Если пользователь не хозяин диаграммы, я должна скрыть от него кнопки для изменения и удаления этой диаграммы. Попробовала написать функцию проверки:

const checkOwner = (elem) => {
        
        savedDiagramHeaders?.map((header) => {
            if (
                header.isOwner === true &&
                header.name === diagram.name
            ) {
                return elem;
            } else {
                return null;
            }
        })
    };

Там, где должна отрисоваться кнопка, я вызываю эту функцию и передаю ей параметр саму кнопку:

{checkOwner(
                    <button
    className={styles.RegularMenuButton}
    onClick={saveExistingDiagram}
>
    Сохранить изменения
</button>
                )}

В качестве elem приходит объект. Таким образом я хочу вызвать четыре раза функцию checkOwner и передать в нее четыре разные кнопки. Как можно передать в функцию кнопку? Таким образом кнопка не отрисовывается и если я внутри функции вывожу elem в консоль, приходит объект Symbol. Как я могу исправить код, чтобы кнопка отрисовалась?

javascript reactjs
Источник: Stack Overflow на русском

Ответы

▲ 0

Ваш код почти рабочий и проблема далеко не в кнопке, а в том что нужно возвращать результат метода map. Потому что функция ничего не возвращает.

И да возможно передать JSX элемент через аргумент в функцию.

const checkOwner = (elem) => {     
   return savedDiagramHeaders?.map((header) => {
        if (
            header.isOwner === true &&
            header.name === diagram.name
        ) {
            return elem;
        } else {
            return null;
        }
    })
};

Я внутри функции вывожу elem в консоль, приходит объект Symbol.

Потому что React элементы представлены в виде объектов и используют внутри себя символы (Symbols) для оптимизации и обнаружения React элементов.

Примерная структура JSX элемента следующая.

{
  $$typeof: Symbol(react.element),
  type: div,
  key: null,
  ref: null,
  props: { name: "название"}
}