Question

我有一些按钮，可通过单击将页面向下滑动，然后由于CSS的作用，这部分变为不同的颜色。但是事实是这些组件是功能性的，我需要类组件。如何使功能组件成为类组件？
反应：

const ScrollButton = props => {
  const onClick = () => window.scrollTo({
    top: props.scrollTo,
    behavior: 'smooth',
  });

  return (
    <div className="down" style={{ top: `${props.top}px` }}>
      <div className="down-text">Scroll to {props.scrollTo}
        <button onClick={onClick}>&#10095;</button>
      </div>
    </div>
  );
};

const App = () => (
  <div className="container">
    <ScrollButton scrollTo={500} top={50} />
    <ScrollButton scrollTo={1000} top={100} />
    <ScrollButton scrollTo={2000} top={200} />
  </div>
);

ReactDOM.render(<App />, document.getElementById('app'));

СSS：

body {
  height: 100vh;
  margin: 0;
}

.container{
  background: linear-gradient(to bottom, yellow, red);
  height: 3000px;
  width: 100%;
}

.down {
  position: fixed;
}

Answer 1

我为Class组件创建了一个功能组件。

<pre>
<code>
class ScrollButton extends React.Component {
  onClick() {
    window.scrollTo({
      top: this.props.scrollTo,
      behavior: 'smooth',
    });
  }

  render() {
    return (
    <div className="down" style={{ top: `${this.props.top}px` }}>
      <div className="down-text">Scroll to {this.props.scrollTo}
         <button onClick={this.onClick.bind(this)}> &#10095;</button>
      </div>
    </div>
  );
  }
}

const App = () => (
  <div className="container">
    <ScrollButton scrollTo={500} top={50} />
    <ScrollButton scrollTo={1000} top={100} />
    <ScrollButton scrollTo={2000} top={200} />
  </div>
);
</code>
</pre>

如何使功能组件成为类组件？

1 个答案: