javascript - 如何使用属性中的状态表达式动态创建 React 元素 (material-ui)

Question

我想在功能组件中动态创建material-ui上下文菜单。因此，我使用如下状态

 let legendContextMenuStatesObject = {};
  for (let key of keys) {
    legendContextMenuStatesObject[key] = initialState;
  }
  const [legendContextMenuStates, setLegendContextMenuStates] = useState(
    legendContextMenuStatesObject
  );

初始状态是

 const initialState = {
  mouseX: null,
  mouseY: null
};

右键单击某些区域后，我将相应的状态对象更改为鼠标事件位置。然后应该会弹出以下菜单。

  function contextMenus(keys) {
    console.log(keys);
    const menues = [];
    for (let key of keys) {
      menues.push(
        <Menu
          keepMounted
          open={legendContextMenuStates[key].mouseY !== null}
          onClose={props.onClose}
          anchorPosition={
            legendContextMenuStates[key].mouseY !== null &&
            legendContextMenuStates[key].mouseX !== null
              ? {
                  top: legendContextMenuStates[key].mouseY,
                  left: legendContextMenuStates[key].mouseX
                }
              : undefined
          }
          anchorReference="anchorPosition"
          TransitionComponent={Fade}
        >
          <MenuItem onClick={event => handleClickLegendContextMenu(event, key)}>
            Line style
          </MenuItem>
        </Menu>
      );
    }
    return menues;
  }

状态更改确实有效，但菜单不出现。 据我了解这个问题，代码行

open={legendContextMenuStates[key].mouseY !== null}

在创建菜单元素时进行评估，而不是插入表达式使元素可以通过状态更改进行控制。 事实上，我通过静态实现让上下文菜单在不同的页面上工作，这意味着我对每个菜单进行硬编码，而不是在循环中创建它们。

我有办法阻止立即评估开放属性并实际保留我想要的表达式吗？

非常感谢任何帮助!

干杯

Answer 1

问题是我在状态中嵌套了对象。这样，即使 useEffect 也无法识别状态的任何变化。 我通过使用状态对象解决了这个问题，如下所示

 let legendContextMenuStates = {};
  for (let key of keys) {
    legendContextMenuStates[key] = useState(initialState);
  }

现在一切正常；还动态创建菜单:

 function contextMenus() {
    const menus = [];
    for (let key of keys) {
      menus.push(
        <Menu
          keepMounted
          open={legendContextMenuStates[key][0].mouseY !== null}
          onClose={() => {
            legendContextMenuStates[key][1](initialState);
          }}
          anchorPosition={
            legendContextMenuStates[key][0].mouseY !== null &&
            legendContextMenuStates[key][0].mouseX !== null
              ? {
                  top: legendContextMenuStates[key][0].mouseY,
                  left: legendContextMenuStates[key][0].mouseX
                }
              : undefined
          }
          anchorReference="anchorPosition"
          TransitionComponent={Fade}
        >
          <MenuItem onClick={event => handleClickLegendContextMenu(event, key)}>
            Color
          </MenuItem>
          <MenuItem onClick={event => handleClickLegendContextMenu(event, key)}>
            Line style
          </MenuItem>
          <MenuItem onClick={event => handleClickLegendContextMenu(event, key)}>
            Line width
          </MenuItem>
          <MenuItem onClick={event => handleClickLegendContextMenu(event, key)}>
            Curve style
          </MenuItem>
        </Menu>
      );
    }
    return menus;
  }