我尝试调用内部函数,该函数从本地但目录返回 Assets url。
但它返回错误缺少模块“.”
该函数在 require 函数之外运行得非常好。
header.jsx
class Header extends Component {
render (){
const checkActive = (page) => {
if ( page === this.props.activePage)
return "active"
else
return null
}
const renderNavIcon = (page) => {
if ( page === this.props.activePage)
return "../../assets/images/"+page+"_red.png" ;
else
return "../../assets/images/"+page+"_grey.png" ;
}
return(
<nav className="navbar navbar-default">
<div className="container-fluid">
<div className="navbar-header">
<button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
<a className="navbar-brand"><img alt="Frapp Logo" src={require("../../assets/images/onlyheartlogo.png")} />
</a>
</div>
{console.log(renderNavIcon("pending")}
<div className="collapse navbar-collapse" id="myNavbar">
<ul className="nav navbar-nav main-nav">
<li className={checkActive("pending")}><a href="/pending"><img src={require(renderNavIcon("pending"))} />Pending</a></li>
<li className={checkActive("support")}><a href="/support"><img src={require(renderNavIcon("support"))} />Support</a></li>
<li className={checkActive("live_edits")}><a href="/live-edits"><img src={require(renderNavIcon("live_edits"))} />Live Edits</a></li>
<li className={checkActive("brand_managers")}><a href="/brand-managers"><img src={require(renderNavIcon("brand_managers"))} />Brand managers</a></li>
<li className={checkActive("brands")}><a href="/brands"><img src={require(renderNavIcon("brands"))} />Brands</a></li>
<li><img alt="User" src={require("../../assets/images/armaan.png")} className="img-responsive" id="user_pic" /></li>
<li><a>Logout</a></li>
</ul>
</div>
</div>
</nav>
)
}
}
{console.log(renderNavIcon("pending")}
返回 "../../assets/images/pending_red.png"
这是一个有效的网址。
请帮忙! 谢谢!
最佳答案
在renderNavIcon
函数中使用require
const renderNavIcon = (page) => {
if ( page === this.props.activePage)
return require("../../assets/images/"+page+"_red.png") ;
else
return require("../../assets/images/"+page+"_grey.png") ;
}
只需从src
中删除require
<li className={checkActive("pending")}><a href="/pending"><img src={renderNavIcon("pending")} />Pending</a></li>
<li className={checkActive("support")}><a href="/support"><img src={renderNavIcon("support")} />Support</a></li>
<li className={checkActive("live_edits")}><a href="/live-edits"><img src={renderNavIcon("live_edits")} />Live Edits</a></li>
<li className={checkActive("brand_managers")}><a href="/brand-managers"><img src={renderNavIcon("brand_managers")} />Brand managers</a></li>
<li className={checkActive("brands")}><a href="/brands"><img src={renderNavIcon("brands")} />Brands</a></li>
关于javascript - ReactJS - 找不到模块 ".",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45344522/