同じ効果を持つレンダリングで矢印機能を使用する代わりに

Question

私はreact-custom-scrollbars libraryを使用していますが、スクロールバーのzIndexと他のCSSプロパティを変更しています。

しかし、私は私のレンダリングメソッドで矢印機能を使用しているので、警告が表示されています。ライブラリのドキュメントでは、これを実行してrenderメソッドの矢印関数を使用する方法について説明しています。 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

あなたは、単に方法をレンダリングして、小道具にそれを渡すの外に親指機能をレンダリング定義することができます。

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> 
) 
} 

親指レンダラはまた、インスタンスメソッドである可能性があります。もしそうなら、それをthis.renderThumbVerticalとして渡すことができます。ただし、そのメソッド内でthisにアクセスする必要がある場合は、コンストラクタでバインドするか、クラスプロパティを使用することを忘れないでください。

Answer 2

私はクラスプロパティとしてdeclareメソッドをお勧めします。その後、メソッドは1回だけ作成されます。 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 
    } 
}