Question

我的布局如下。

<ParentComponent>
  |ComponentA
  |ComponentA
  |ComponentA

基本上，我在父组件中调用相同的组件3次，因为它们非常相似，但具有不同的值。有人告诉我我需要在父组件上放置一个按钮，以更改3个ComponentA中仅一个的值。调用ComponentA 3次给我3次相同的东西，如果我按一个按钮将状态设置为1，它将进入全部3。如何选出一个组件？

谢谢！

Answer 1

制作一系列要发送给组件的道具，然后根据应用程序的需要在某些按钮/输入事件上更改该道具的内容。

例如：

const arrOfProps = [{someProp:'aaa'}, null, null]

const someFunc = (num)=>{
    arrOfProps.forEach((x, index)=>{
        if (index === num) {x = {someProp:'aaa'}}
        else { x = null}
    })
}

render(){
    return(
    <div>
        <button onClick={()=>someFunc(0)}>One</button>
        <button onClick={()=>someFunc(1)}>Two</button>
        <button onClick={()=>someFunc(2)}>Three</button>
        <ParentComponent>
            <div>{arrOfComponents.map((comp, index)=>{
                return <ComponentA key={index} prop={comp}/>
            })}</div>
        </ParentComponent>
    </div>)
}

如何更改react中3个组件中1个的状态

1 个答案: