时间戳

首页 > 解决方案 > 如何将 React 中的 useState() 绑定到动态生成

元素？

reactjs - 如何将 React 中的 useState() 绑定到动态生成
元素？

问题描述

我正在尝试在 React 中创建一个小部件，该小部件在每个块中都有一个下拉菜单。我需要在每个相应列表中单击一个按钮时显示一个下拉列表。但是发生的事情是，当我单击按钮时，所有下拉菜单都显示出来（所有动态重复的元素）。

class App extends Component {
  render() {
    return (
      <div className="wrapper">
        <div className="widget">
          <h2>whats happeing</h2>
          <Block data={mock} /> //sub component which has the dropdown
        </div>
      </div>
    );
  }
}

const Block = props => {
  let blocks = [];
  let [showDropdown, setShowDropdown] = useState(false); //currently i am trying to get this done with useState()

  if (props.data.length) {
    blocks = props.data.map(function(item) {
      return (
        <div key={item.id} className="block">
          <span
            className="dropdown-btn"
            onClick={() => setShowDropdown(!showDropdown)}
          >
            ▼
          </span>
          <div className="left-col">
            <p>{item.category}</p>
            <h3>
              <a href="#">{item.title}</a>
            </h3>
          </div>
          {showDropdown && <Dropdown />}
        </div>
      );
    });
  }
  return <div>{blocks}</div>;
};

这是代码的沙箱链接。你能告诉我如何在 React 中处理这个问题吗？ https://codesandbox.io/s/widget-with-drodown-kjovc

标签： reactjs

解决方案

问题是您只有 1 个可见变量，但您确实需要多个。如果您进行如下更改，它将正常工作

const Block = props => {
  let [showDropdown, setShowDropdown] = useState(false);
  const { category, title } = props.block;

  return (
    <>
      <span
        className="dropdown-btn"
        onClick={() => setShowDropdown(!showDropdown)}
      >
        ▼
      </span>
      <div className="left-col">
        <p>{category}</p>
        <h3>
          <a href="#">{title}</a>
        </h3>
      </div>
      {showDropdown && <Dropdown />}
    </>
  );
};

const Blocks = props => {
  let blocks = [];

  if (props.data.length) {
    blocks = props.data.map(function(item) {
      return (
        <div key={item.id} className="block">
          <Block block={item} />
        </div>
      );
    });
  }
  return <div>{blocks}</div>;
};
export default Blocks;

注意我们如何将可见的布尔值移动到它自己的组件中

推荐阅读