从 material-ui 按钮 onClick 渲染 JSX

Question

我正在尝试在单击 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 功能组件而不是 class 组件吗？

Answer 1

请阅读 生命周期 这不是反应如何工作 onclick 功能 renderDisplayer 被调用并且 return JSX 到 onClick 事件你需要在这里使用 state 来渲染组件与三元运算符 renderDisplayer 函数做 setState 所以 DOM 将更新

Answer 2

我不太清楚你的问题。如果要根据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} />
)}

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

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>

从 material-ui 按钮 onClick 渲染 JSX

Render JSX from material-ui Button onClick

jsx

typescript

reactjs

material-ui

tsx