更改嵌入组件的 prop 值

【问题标题】：Changing the prop value of embedded component更改嵌入组件的 prop 值
【发布时间】：2021-03-27 23:37:31
【问题描述】：

我制作了一个标签组件和一个带有 3 个标签的进度条。当我选择第一个选项卡时，我希望我的进度条位于 33%，第二个选项卡为 66%，第三个选项卡为 100%。

我需要一些帮助来弄清楚如何让我的进度条在我更改选项卡时更改它的值。当你在组件 props 中给出 0-100 的值时，进度表会填满。

所以.. 我应该使用 redux 来跟踪价值还是你们有什么建议。谢谢十亿

【问题讨论】：

【解决方案1】：

您可以在单击选项卡项的状态下设置进度值，如下所示

function TabProgress() {
  let [progress, setProgress] = useState(0);
  return (
    <>
      <ul>
        <li className="xxx" onClick={() => setProgress(100 / 3)}>A</li>
        <li className="xxx" onClick={() => setProgress(100 / 2)}>B</li>
        <li className="xxx" onClick={() => setProgress(100 / 1)}>C</li>
      </ul>
      <ProgressBar width="xxx" value={progress} />
    </>
  )
}

你也可以动态渲染<li>来创建合适的组件

<ul>
 {props.tabs.map((tab, i) => (
  <li className="xxx" key={tab} onClick={() => setProgress(100 / props.tabs.length - i)}>{tab}</li>
 ))}
</ul>

【讨论】：