时间戳

首页 > 解决方案 > 从 props 动态创建状态和组件

javascript - 从 props 动态创建状态和组件

问题描述

我正在使用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);

我觉得这可能是正确的方法，但我无法让它发挥作用。我也尝试过编写减速器，但也失败了。任何有关如何进行的建议将不胜感激。

标签： javascriptreactjs

解决方案

如果该状态仅用于打开/折叠文本。您不需要将数组传递给 Example()。让我们保持每个按钮的状态。

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

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

这是一个代码沙箱，您可以使用它： https ://codesandbox.io/s/elated-ives-j24y3

推荐阅读