具有函数的反应组件

Question

我有一个反应类与一些div，我想从一个函数添加一些额外的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> 
    ); 
    } 
} 

Answer 1

就快，只是<this.OverlayButton ... />取代<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 ... /> 
    } 
} 

Answer 2

如果你想使用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} /> 
      {this.OverlayButton({ 
      icon: 'check', 
      handler: function() {}, 
      className: '' 
      })} 
     </div> 
    ); 
    } 
}