javascript - 用功能 react 组件

我有一个带有一些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 ... />
   }
}