所以我非常新的反应，我一直在尝试制作一个基于滑块的价格计算器 . 基本思想是用户将滑过这些步骤以选择购买量 . 不同金额的价格将被硬编码，并且当用户移动滑块时，它们应相应地显示在div中 . 显示的价格应取决于滑块上选择的步骤，我很难理解逻辑 . 我不知道如何传递道具，因为它们应该打印的div既不是滑块组件的子节点，也不是滑块组件的父节点 . 请随意纠正我，告诉我是否以完全错误的方式接近了项目 . 这是子滑块：

import React from 'react';
import PropTypes from 'prop-types';
import StepRangeSlider from 'react-step-range-slider';

const styles = {
  container: {
    width: 300,
  },
};

class StepSlider extends React.Component {
  state = { value: 0 };

  handleChange = (event, value) => this.setState({ value });

  render() {
    const range = [
      { value: 0, step: 1 }, // acts as min value
      { value: 20 }, // acts as max value
    ];
    return (
            <div>
      <StepRangeSlider
        value={0}
        range={range}
        onChange={value => console.log(value)}
      />
            </div>
    );
  }
}


export default StepSlider;

并且导入了父项的计算器组件：

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';

import StepSlider from './Slider.js';

import { RadioGroup, RadioButton } from 'react-radio-buttons';

class Calculator extends React.Component {
  render() {
    return (
            <div>
            <StepSlider />


            </div>
    );
  }
}

export default Calculator;
javascript reactjs calculator react-props