这是我的第一个 StackOverflow 问题,请随意添加您想要的任何建议。
我有一个 AudioControls 组件,它呈现四个不同的 Controls 组件,每个组件用于不同的音频选项(音量、低音、中音、高音)。我写的方式让父母知道并管理四种状态:useState({ volume: 50, bass: 50, mid: 50, treble: 50, }) 然后将这些值作为道具传递给孩子们。
对此,我有两个顾虑:
控件组件完全相同,也许它们可以有自己的值状态(在每个控件上放置一个 audioValue 状态)。我读过在可能的情况下总是解除状态是一个很好的做法,但为什么需要它?这样做的充分理由是什么?
鉴于它们都非常相似,有没有办法将地图功能与这些控件一起使用?当然,不会失去易读性。
这是音频控制代码:
function AudioControls() {
const [audioValues, setAudioValues] = useState({
volume: 50,
bass: 50,
mid: 50,
treble: 50
})
function handleControl(option, id) {
const oldValue = audioValues[id]
const newValue = option === "+" ? oldValue + 1 : oldValue - 1
setAudioValues(prevState => (
{
...prevState,
[`${id}`] : newValue
}
))
}
return(
<>
<Control
id="volume"
name="Volume"
value={audioValues.volume}
handleControl={handleControl}
/>
<Control
id="bass"
name="Bass"
value={audioValues.bass}
handleControl={handleControl}
/>
<Control
id="mid"
name="Mid"
value={audioValues.mid}
handleControl={handleControl}
/>
<Control
id="treble"
name="Treble"
value={audioValues.treble}
handleControl={handleControl}
/>
</>
)
}
这是控制组件:
function Control({ id, name, value, handleControl }) {
return(
<div>
<button onClick={() => handleControl("+", id)}>
+
</button>
<label>{name}: {value}</label>
<button onClick={() => handleControl("-", id)}>
-
</button>
</div>
)
}
这是我的第二个堆栈溢出答案。也对任何和所有反馈开放。
我很想知道你从哪里听说的这样一个事实,即提升状态总是一个好主意。我的想法是:如果提升状态总是一个好主意,你什么时候停止提升?在这种情况下,为什么只将 state 上移一个?为什么不进一步提升它?
回答您的第一个问题:将状态提升到父组件的主要原因是您是否需要两个兄弟组件来使用相同的状态。例如:
const [volume, setVolume] = setState(50);
function changeVolume (newVolume) {
setVolume(newVolume);
}
<VolumeDisplay volume={volume} />
<VolumeControl onChange={changeVolume} />
在您的情况下,看起来每个人都能够更改自己的状态,因此最好将状态下推到每个<Control>
. 一旦您将音频值本地放置在控制组件中,您就可以像这样轻松地映射它们:
const controls = [
{id: "bass", name: "Bass"},
{id: "volume", name: "Volume"},
{id: "mid", name: "Mid"},
{id: "treble", name: "Treble"},
]
return (
<>
{controls.map(({id, name}) => <Control id={id} name={name} />)}
<>
)
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句