我有一个带有一些 div 的 React 类,我想从一个函数中添加一些额外的 HTML。
当我运行它时,我收到一条错误消息,提示未定义 OverlayButton。我的灵感来自HERE
我知道我可以将 OverlayButton 拆分到一个单独的类中,但它只是一个没有逻辑的愚蠢按钮。
export default class Widget extends React.Component {
OverlayButton(props) {
return (
<div
className={props.className}
onClick={props.handler}
ref='select'>
<i className="material-icons">
{props.icon}
</i>
</div>
)
}
render() {
return (
<div>
<div className="photo-widget-content"></div>
<div className="photo-widget-header"></div>
<img src={this.props.photo.url}></img>
return <OverlayButton icon="check" handler="" className=""/>
</div>
);
}
}
最佳答案
你快到了,只需更换 <OverlayButton ... />
与 <this.OverlayButton ... />
严格来说,根据另一个答案(也是正确的),没有必要将其作为函数调用,因为您可以依靠 JSX 为您完成。
Here一个例子。
class Widget extends React.Component {
OverlayButton(props) {
return (
<div>
Button
</div>
);
}
render() {
return (
<div>
<this.OverlayButton />
</div>
);
}
}
ReactDOM.render(
<Widget />,
document.getElementById('container')
);
话虽如此,我可能不会定义 OverlayButton
作为一个类的实例方法,而是将它移到类的顶部并简单地将它定义为一个函数......像这样:
const OverlayButton = (props)=> {
return (
<div>
Button
</div>
);
}
然后
class Widget extends React.Component {
...
render() {
return <OverlayButton ... />
}
}
关于javascript - react 组件与功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42093716/