Question

我正在使用react-custom-scrollbars library并正在更改滚动条的zIndex和其他css属性。

这是有效的，但是，我正在收到警告，因为我在我的渲染方法中使用了箭头功能。该库的文档解释了如何在渲染方法中使用箭头函数。 As you can see here there has been an issue raised for this，但文档中尚未对此进行更新。

如果不在渲染中使用箭头函数，我很难理解如何实现以下行为。

render(){

  <Scrollbars renderThumbVertical = {({
      style, ...props }) =>
       <div { ...props} style = {{
        ...style,
        backgroundColor: 'rgba(0, 0, 0, 0.2)',
        zIndex: 10000,
        borderRadius: 2
      }}/>
  }>
     <p>Content here</p>
     <p>Content here</p>
     <p>Content here</p>

   </Scrollbars>

}

Answer 1

您可以在render方法之外定义渲染拇指功能，然后将其传递给props：

function renderThumbVertical({ style, ...props }) {
  return (
    <div { ...props} style = {{
      ...style,
      backgroundColor: 'rgba(0, 0, 0, 0.2)',
      zIndex: 10000,
      borderRadius: 2
    }}/>
  )
}

// and use it in component
render() {
  return (
    <Scrollbars renderThumbVertical={renderThumbVertical}>
       <p>Content here</p>
       <p>Content here</p>
       <p>Content here</p>
    </Scrollbars>
  )
}

Thumb渲染器也可以是实例方法。如果是这样，您可以将其作为this.renderThumbVertical传递。但是，如果您需要在该方法中访问this，请不要忘记在构造函数中绑定它或使用类属性。

Answer 2

我建议将方法声明为类属性。然后这些方法只会创建一次。 http://babeljs.io/blog/2015/06/07/react-on-es6-plus

class MyComponent extends React.Component {
    render(){
         return (
           <Scrollbars renderThumbVertical={this.renderThumbVertical}>
             <p>Content here</p>
             <p>Content here</p>
             <p>Content here</p>
           </Scrollbars>
        );
    }
    renderThumbVertical = () => {
         // code
    }
}

替代在渲染中使用箭头功能具有相同的效果

2 个答案: