Блог

Главная - Вопросы по программированию - Переключить изображение на текст, щелкнув в React.js

Переключить изображение на текст, щелкнув в React.js

#javascript #reactjs #react-hooks #toggle #react-functional-component

#javascript #reactjs #реагирующие крючки #переключение #реагировать-функциональный компонент

Вопрос:

Я искал похожие вопросы, но не могу понять, что я делаю не так.

Я пытаюсь переключиться с фотографии на текст onClick, чтобы при нажатии на фотографию отображался текст, а не изображение. Но когда я нажимаю на фотографию, я получаю сообщение об ошибке: «setToggleImage не является функцией».

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

 import React, { useState } from 'react';
import Image from 'react-bootstrap/Image';
import profilePhoto from '../images/_MG_9807.JPG';

const contactInfo = {
    title: 'Contact: ',
    email: 'email: xxx@gmail.com',
    Github:  ' Github: ', 
    linkedin: 'linkedin: ',
};

const ImageContactDetails = () => {
    const [ toggleImage, setToggleImage ] = useState(true);

    return (
        <div>
            <div className='imageContactDetails' onClick={() => setToggleImage(!toggleImage)} > 
                { toggleImage ? <Image id='imageDetails' src={profilePhoto}   alt='professionalprofile' /> : 
                <div>   
                    <h4> {contactInfo.title} </h4>
                    <h5> {contactInfo.email} </h5>
                    <h5> {contactInfo.Github} </h5>
                    <h5> {contactInfo.linkedin} </h5>
                </div>   
                }
            </div>
            <div id='contactInfo'></div>
        </div>
    )
}
export default ImageContactDetails;

Ответ №1:

useState() возвращает пару значений в массиве, поэтому вам следует использовать деструктурирование массива. Это должно быть:

 const [toggleImage, setToggleImage] = useState(true);

Комментарии:

1. ах! спасибо, что исправили это. Однако после его изменения я все еще не заставляю код работать. Он не показывает мне ошибку, но она не меняется при нажатии (хотя предупреждение работает). У вас есть какие-либо предложения?

2. Отлично, я буду рад изучить ваш код @AOJ, если вы можете поделиться им. На данный момент я вижу, что вы changeToText ничего не должны возвращать. Я бы, вероятно, полностью отказался от него и добавил встроенную функцию в onClick, like onClick={() => setToggleImage(!toggleImage)} и визуализировал в вашем return условно на основе значения toggleImage .

3. Большое вам спасибо! это действительно сделало трюк, который я пытался сделать. Вы не представляете, как я обрадовался, когда это сработало. Я обновил весь приведенный выше код. Это не так уж много, это все, что у меня есть для этого. Однако я столкнулся с другой небольшой проблемой. после «: » в троичном операторе я пытался вызвать несколько абзацев, и это не сработало, поэтому я создал эту переменную «allInformation» для хранения того, что я хотел использовать, и она печатает, но все это смешивается вместе. Любые советы о том, как я мог бы разбить их на несколько строк?

4. Не беспокойтесь. Однако вы не можете вставить массив таким образом. React преобразует его в список текстовых узлов, которые будут отображаться в одной строке. Вам нужно добавить необходимые HTML-теги (и я уверен h4 , что это не тот, который нужно. Возможно ul , li или dl список?)

5. Привет, Жолт, у меня не было возможности вернуться и поблагодарить тебя за совет раньше. На самом деле, я понял, что я делал неправильно в первую очередь, что было очень простой вещью. Я не понимал, что в react все возвращаемые данные должны быть перенесены в один корневой элемент DOM, где имеется более одного элемента. Я думал, что это только для основного. код обновляется на случай, если он может помочь кому-либо еще.