React 组件的问题

Question

我是 React 的新手，我正在尝试调用一个充当组件的函数，但是 returns 有两个值，一个叫做 'render'，它只是 returns 一个组件包装在 div 中，另一个称为 sliderVal，它是该滑块的内部状态值。以下是来自 MySlider.js

的代码

function MySlider(props) {
  const [sliderVal, setSliderVal] = useState(1);

  return{ 
    render:(
    <div>

<Grid container justify = "center">
<Box sx={{ width: 250 }}>
      <Typography id="input-slider" gutterBottom>
        {props}
      </Typography>
      <Slider
  defaultValue={1}
  valueLabelDisplay="auto"
  step={1}
  value={sliderVal}
  marks
  min={1}
  max={10}
  onChange={(_, newValue) => setSliderVal(newValue)}
/>
    </Box>
    </Grid>
    </div>
  ),
  sliderVal
}

在我的 App.js 中，我使用以下代码渲染两个滑块，并将它们的值传递到另一个组件。

  var {render, sliderVal} = MySlider("Number of Paragraphs");
  var {render1, sliderVal1} = MySlider("Number of Words");

第一个工作正常，我可以使用 {render} 渲染滑块，使用 {sliderVal} 访问它的值并传递到另一个组件。然而，第二个不起作用，没有任何渲染。当我 console.log render1 和 sliderVal1 时，它们都是未定义的。非常感谢任何见解！

Answer 1

第二次更改为：

var {render:render1, sliderVal:sliderVal1} = MySlider("Number of Words");

React 组件的问题

Issue with React Component

javascript

reactjs

react-hooks