Как использовать response-rangelider в компоненте без состояния

Question

теперь в простом примере в response-rangelider, как показано ниже

import React, { Component } from 'react'
import Slider from 'react-rangeslider'

class VolumeSlider extends Component {
  constructor(props, context) {
    super(props, context)
    this.state = {
      volume: 0
    }
  }

  handleOnChange = (value) => {
    this.setState({
      volume: value
    })
  }

  render() {
    let { volume } = this.state
    return (
      <Slider
        value={volume}
        orientation="vertical"
        onChange={this.handleOnChange}
      />
    )
  }
}

, если я изменяю это на компонент без состояния

    return (
      <Slider
        value={props.volume}
        orientation="vertical"
        onChange={props.handleOnChange}
      />
    )

, и я обрабатываю свой метод state и onChange в другой компонент с полным состоянием, как передать значение методу handleOnChange?

  handleOnChange = (value) => {
    this.setState({
      volume: value
    })
  }

это библиотека, которую я использую https://www.npmjs.com/package/react-rangeslider

Answer 1

вы можете сделать что-то подобное и передать функцию и состояние из другого компонента в качестве реквизита.

 import React, { Component } from "react";
 import Slider from "react-rangeslider";

 const VolumeSlider = ({onChange,value}) => {
      return <Slider value={value} orientation="vertical" onChange={onChange}/>;
    };