从 material-ui 按钮 onClick 渲染 JSX答案

【问题标题】：Render JSX from material-ui Button onClick从 material-ui 按钮 onClick 渲染 JSX
【发布时间】：2021-10-14 14:04:42
【问题描述】：

我正在尝试在单击 material-ui 按钮时呈现 JSX。单击时我正在登录控制台，但看不到任何 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 函数式组件而不是类组件吗？

【问题讨论】：

标签： reactjs typescript material-ui jsx tsx

【解决方案1】：

你的问题对我来说有点不清楚。如果要根据typeof(address) == 'undefined' || address == '' 条件渲染<div className='error'><li>No address found</li></div>，则无需点击按钮，最好使用条件渲染。例如：

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

但是如果你想通过点击按钮来渲染你的地址组件，你应该定义一个状态并在点击按钮时将它设置为true。像这样：

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

{shouldShowAddress && (
    <>
        {!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 事件您需要在此处使用 state 使用三元运算符 renderDisplayer 功能渲染组件执行 setState 以便 DOM 将更新

【讨论】：