Html在从函数调用时不呈现

Question

我试图使用函数调用显示一些html，但由于某种原因它没有呈现

displayMenu() {
if (this.props.menu) {

Object.keys(this.props.menu).map((key,index)=>{
if(index==0){
console.log("hi")
return <li class="nav-item active">
<a className="nav-link" id={key + "-tab"} data-toggle="tab" href={"#" + key} role="tab" aria-controls={key} aria-selected="true">{key}</a>
</li>
}else{
return <li class="nav-item">
<a className="nav-link" id={key + "-tab"} data-toggle="tab" href={"#" + key} role="tab" aria-controls={key} aria-selected="true">{key}</a>
</li>
}
})
}
return <h1>hi</h1>

}

所以我使用引导导航选项卡，我试图创建选项卡基础上的项目，我已经存储在一个名为菜单的对象。我在写这个函数时，第一个标签是活动的，其余的不是。但是，当我运行代码时，选项卡根本没有呈现。但是在底部返回

<h1>hi</h1>

渲染。我的console.log("hi)也会显示出来，这样我就知道我正在运行代码。只是不确定为什么不渲染。

Answer 1

您没有从Object.keys(this.props.menu).map返回值到渲染函数，返回值在回调内部，只返回到map。

假设displayMenu()在render()方法中被调用，在Object.keys前面添加return，如下所示:

function displayMenu() {
if (this.props.menu) {
return Object.keys(this.props.menu).map((key, index) => {
if (index == 0) {
console.log('hi');
return (
<li class='nav-item active'>
<a
className='nav-link'
id={key + '-tab'}
data-toggle='tab'
href={'#' + key}
role='tab'
aria-controls={key}
aria-selected='true'
>
{key}
</a>
</li>
);
} else {
return (
<li class='nav-item'>
<a
className='nav-link'
id={key + '-tab'}
data-toggle='tab'
href={'#' + key}
role='tab'
aria-controls={key}
aria-selected='true'
>
{key}
</a>
</li>
);
}
});
}
}
render () {
return displayMenu();
}