javascript - 在渲染中使用箭头函数的替代方法具有相同的效果

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

您可以简单地在渲染方法之外定义渲染拇指函数，然后将其传递给 Prop :

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，请不要忘记将其绑定(bind)在构造函数中或使用类属性。