javascript - 从动态列表中渲染动态组件

Question

有一个主（Template.js）页面，其中数据是从 API 获取的，使用这些数据List（来自 material-ui）由renderTemplatesList函数形成。如何处理列表元素onClick事件并更改h1内容？

//Template.js
export default function Template() {
  const [data, setData] = useState([]);

  useEffect(() => {
    //get data from backend...
  }, []);

  const templateData = renderTemplatesList(data);
  return (
    <div>
      <List>{templateData}</List>
    </div>
    <div>
      <h1>{/* Selected list item params */}</h1>
    </div>
  );
}

export const renderTemplatesList = (items) => {
  let templates = null;
  if (items !== undefined && items !== null && items.length !== 0) {
    templates = items.map((template) => (
      <ListItem>
        <ListItemButton>
          <ListItemText primary={template.name} />
        </ListItemButton>
      </ListItem>
    ));
  }
  return templates;
};

标签： javascriptreactjsdynamicmaterial-ui