Блог

Главная - Вопросы по программированию - Визуализация JSX из материала-Кнопка пользовательского интерфейса onClick

Визуализация JSX из материала-Кнопка пользовательского интерфейса onClick

#reactjs #typescript #material-ui #jsx #tsx

Вопрос:

Я пытаюсь визуализировать JSX при нажатии кнопки material-ui. Я захожу в консоль при нажатии, но не вижу, чтобы какой-либо JSX отображался.

 interface TileProps {
    address?: string;
}

const renderDisplayer = (address: string) => {
    console.log('Rendering address', address!);
    if (typeof(address) == 'undefined' || address == '') {
        return(<div className='error'><li>No address found</li></div>)
    }
    return(<AddressDisplayer address={address} />)
}

const Tile = (props: TileProps) => {

    return(
        <div className='tile'>
            <ul>
                <li>{props.address}</li>
            </ul>
            <Button variant='contained' onClick={() => {renderDisplayer(props.address)}}>Display</Button>
        </div>
    )
}

export default Tile;

Я вижу console.log('Rendering address', address!); , как работает, когда нажата кнопка, но JSX не отображается.

Может ли это быть связано с тем, что я использую функциональные компоненты React вместо компонентов класса?

Ответ №1:

Ваш вопрос мне как-то непонятен. Если вы хотите выполнить рендеринг <div className='error'><li>No address found</li></div> по typeof(address) == 'undefined' || address == '' условию, нет необходимости нажимать на кнопку, и лучше использовать условный рендеринг. Например:

 {!props.address ? (
    <div className='error'><li>No address found</li></div>
) : (
    <AddressDisplayer address={props.address} />
)}

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

 const [shouldShowAddress, setShouldShowAddress] = useState(false);

{shouldShowAddress amp;amp; (
    <>
        {!props.address ? (
            <div className="error">
                <li>No address found</li>
            </div>
        ) : (
            <AddressDisplayer address={props.address} />
        )}
    </>
)}

<Button
    variant="contained"
    onClick={() => {
        setShouldShowAddress(true)
    }}
>
    Display
</Button>

Ответ №2:

Пожалуйста, прочитайте о жизненном цикле, Это не то, как работает реакция, вызывается функция onclick renderDisplayer и возвращает JSX в событие onClick. Здесь вам нужно использовать состояние для визуализации компонента с помощью тройного оператора Функция renderDisplayer. Установите состояние, чтобы DOM обновил

Метки: