javascript - Javascript - 动态创建道具的状态和组件

我正在使用react-bootstrap。

下面的组件呈现一个按钮,该按钮可根据状态切换/折叠某些文本:


function Example() {


 const [open, setOpen] = useState(false);



 return (


 <div>


 <Button onClick={() => setOpen(!open)}>Button</Button>


 <Collapse in = { open }>


 <div>Lorem ipsum dolor sit amet</div>


 </Collapse>


 </div>


 );


}



export default Example;



组件接收一个数组,我通过它映射并返回按钮,


const updatedExample = ({ arr }) => {


 const [open, setOpen] = useState(false);



 const buttons = arr.map((val, i) => (


 <div>


 <Button onClick={() => setOpen({})}> Button </Button>



 <Collapse in = { open } >


 <div>


 Lorem ipsum dolor sit amet


 </div>


 </Collapse>


 </div>


 ));



 return (


 <div>


 { buttons }


 </div>


 );


}



export default updatedExample;



我尝试了各种想法,例如,将数组转换为对象并将它设置为状态:


// arr === [2,6,9]


const newState = foo(arr) // {2: false, 6: false, 9: false}


const [open, setOpen] = useState(newState);



我认为这可能是正确的方法,但是我一直无法使它起作用。

时间:

如果状态仅用于打开/折叠文本。你不需要将数组传递给Example( )

在创建完上面的Example()之后,只需像这样渲染数组,


<div>


{


 arr.map((val, i) => { return Example() })


}


</div>



我认为您的方向正确!这是一个示例,它完成(几乎)你的任务(与按钮对应的值对象)。


import React, { useState } from"react";


import ReactDOM from"react-dom";



const btns = ["bt1","bt2","bt3"];



function App() {


 const [active, setActive] = useState({});



 return (


 <div className="App">


 {btns.map(btn => {


 return (


 <div key={btn}>


 <button


 onClick={() => setActive({ ...active, [btn]: !active[btn] })}


 >


 {btn}


 </button>


 {active[btn] ?"on" :"off"}


 </div>


 );


 })}


 </div>


 );


}



const rootElement = document.getElementById("root");


ReactDOM.render(<App />, rootElement);




function ButtonWithCollapse() {


 const [open, setOpen] = useState(false)



 return (


 <div>


 <Button onClick={() => setOpen(open => !open)}>Button</Button>


 <Collapse in={open}>


 <div>Lorem ipsum dolor sit amet</div>


 </Collapse>


 </div>


 )


}



使用组件


function UpdateExample({ arr }) {


 return arr.map(item => <ButtonWithCollapse key={item} />)


}



注意,我们不跟踪UpdateExample (父级)组件中的状态,而是让每个ButtonWithCollapse (子级)组件跟踪它自己的状态。

https://codesandbox.io/s/trusting-browser-rk0nf

...