时间戳

首页 > 解决方案 > React 中 Material UI 组件渲染内容的问题

reactjs - React 中 Material UI 组件渲染内容的问题

问题描述

Material UI 组件的文本内容不会呈现为最终的 HTML。我的组件的渲染方法如下所示：

render() {
    const panel = this.props.panel;
    return (<div>{panel.title}
        <Card className={style.panel}>
            <CardHeader>atesta {panel.title}</CardHeader>
            <CardContent>
                btestb
                <div className={style.fields}>
                    {this.renderFields()}
                </div>
                <div className={style.query}>
                    {this.renderQuery()}
                </div>
            </CardContent>
            <CardActions>
                {this.renderAdds()}
            </CardActions>
        </Card>
        </div>
    );
}

浏览器中的结果（通过浏览器中的开发工具复制）是：

<div>Všechny kurzy
    <div class="MuiPaper-root MuiCard-root panel__2c68Z MuiPaper-elevation1 MuiPaper-rounded">
        <div class="MuiCardHeader-root">
            <div class="MuiCardHeader-content"/>
        </div>
        <div class="MuiCardContent-root">btestb<div class="fields__3WM0i"/>
            <div class="query__2pUWn">
                <div>
                    <table class="MuiTable-root list__3CCEF">
                        <tbody class="MuiTableBody-root">
                            <tr class="MuiTableRow-root item__3Owps">
                                <td class="MuiTableCell-root MuiTableCell-body"/>
                            </tr>
                            <tr class="MuiTableRow-root item__3Owps">
                                <td class="MuiTableCell-root MuiTableCell-body"/>
                            </tr>
                            <tr class="MuiTableRow-root item__3Owps">
                                <td class="MuiTableCell-root MuiTableCell-body"/>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="MuiCardActions-root MuiCardActions-spacing">
            <div class="buttons__2F1y2">
                <button class="MuiButtonBase-root MuiButton-root MuiButton-text" tabindex="0" type="button">
                    <span class="MuiButton-label">Přidat kurz</span>
                    <span class="MuiTouchRipple-root"/>
                </button>
            </div>
        </div>
    </div>
</div>

您可以在第一行看到字符串“Všechny kurzy”（这是 panel.title 的值），但是<div class="MuiCardHeader-content"/>其中 panel.title 也与 atesta 字符串一起使用时为空。字符串 btestb 在最终 HTML 中也正确可见。

知道有什么问题吗？我将不胜感激任何帮助！

标签： reactjsmaterial-ui

解决方案

CardHeader不渲染孩子。相反，您应该使用titleand/orsubheader道具。

所以而不是：

<CardHeader>atesta {panel.title}</CardHeader>

你应该有：

<CardHeader title={`atesta ${panel.title}`} />

或者：

<CardHeader title={<>atesta {panel.title}</>} />

文档：https ://material-ui.com/api/card-header/#props

推荐阅读