当在React中单击一个按钮(无挂钩)时，我如何才能只展开一个列表项？

在React中，当单击一个按钮时，只展开一个列表项的方法可以通过以下步骤实现：

首先，在React组件的状态中添加一个变量，用于表示当前展开的列表项的索引。例如，可以使用useState钩子来创建一个名为expandedIndex的状态变量，并将其初始值设置为-1。

import React, { useState } from 'react';

function MyComponent() {
  const [expandedIndex, setExpandedIndex] = useState(-1);

  // 其他组件代码...

  return (
    // JSX代码...
  );
}

在列表项的渲染循环中，为每个列表项添加一个按钮，并为按钮绑定一个点击事件处理函数。在点击事件处理函数中，更新expandedIndex的值为当前列表项的索引。

import React, { useState } from 'react';

function MyComponent() {
  const [expandedIndex, setExpandedIndex] = useState(-1);

  const handleItemClick = (index) => {
    setExpandedIndex(index);
  };

  const listItems = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <div>
      {listItems.map((item, index) => (
        <div key={index}>
          <button onClick={() => handleItemClick(index)}>展开</button>
          {expandedIndex === index && <div>{item}</div>}
        </div>
      ))}
    </div>
  );
}

在上述代码中，当按钮被点击时，handleItemClick函数会将当前列表项的索引作为参数传递，并更新expandedIndex的值。在列表项的渲染循环中，通过判断expandedIndex是否等于当前列表项的索引，来决定是否展示该列表项的内容。

这样，当单击一个按钮时，只有对应的列表项会展开，其他列表项则会保持关闭状态。

请注意，上述代码仅为示例，实际应用中可能需要根据具体需求进行适当的修改和扩展。

关于React的更多信息和学习资源，可以参考腾讯云的React产品介绍页面：React产品介绍