用函数反应组件答案

【问题标题】：React component with function用函数反应组件
【发布时间】：2017-06-24 22:12:39
【问题描述】：

我有一个带有一些 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>
      );
  }
}

【问题讨论】：

标签： javascript reactjs ecmascript-6 react-jsx jsx

【解决方案1】：

如果你想使用 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>
      );
  }
}

【讨论】：

是的，它做到了——在 fb docs 上并没有这么描述——谁在乎呢。谢谢
@TareqAl-Zubaidi 是的，但在使用组件的情况下，我会将 OverlayButton 作为单独的组件/功能移动，而不是相同的 Widget 方法。
你不必这样做，但这是一个更好的设计
@leo 当然是，但很高兴知道可能性
正是……他只是提出了一种可能性，而与您的建议并不矛盾:-)

【解决方案2】：

你快到了，只需替换 <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 ... />
   } 
}

【讨论】：