Javascript 根据所选组件更改React中的上下文菜单

我正在使用一个编辑器，其中我希望有一个上下文菜单（锚定菜单，而不是弹出菜单），根据所选项目的不同而变化：例如，当我编辑项目1时，我得到项目1的上下文菜单，当我编辑项目2时，我得到项目2的上下文菜单

+----------+ +------------------+
|          | |     Item One     |
|  Editor  | +------------------+
|   Menu   | +------------------+
|          | |     Item Two     |
+----------+ +------------------+

我不确定最容易做出反应的方式是什么。我的直觉是有这样一个组件层次结构（描述孩子）：

然后将一个

onFocus

回调传递给

EditableOne

等，但我不确定如何基于此更新

EditorMenu

组件。也许这根本不是正确的方式

EditorMenu

组件也需要能够与

项目

组件对话（以发出更改信号），这表明

EditorMenu

应该是

项目

的子组件（因为与上述

项目

相关的所有状态都应该在

项目

中维护，并且只在那里维护）

---

感谢您的提示！

当您在React中开发时，

父级

将控制其

子级

，因此您应该始终这样做。另外，请看一看，它可能有助于构建您的React应用程序

您的层次结构应如下所示：

import React, {Component} from "react";

class EditorInterface extends Component {
  state = {
    focusedItem: 0
  }

  handleItemFocus = item =>
    this.setState({focusedItem: item});

  render() {
    return (
      <div>
        <ContextMenu focusedItem={this.state.focusedItem} />
        <EditableOne onItemFocus={this.handleItemFocus} />
        <EditableTwo onItemFocus={this.handleItemFocus} />
      </div>
    );
  }
}

const ContextMenu = ({ focusedItem }) =>
  focusedItem === 1 ? (
    <div>
      <span>Context Menu for Item 1</span>
    </div>
  ) : focusedItem === 2 ? (
    <div>
      <span>Context Menu for Item 2</span>
    </div>
  ) : (
    <div>
      <span>No item is focused</span>
    </div>
  );

const EditableOne = ({onItemFocus}) => (
  <input type="text" onFocus={() => onItemFocus(1)} />
)

const EditableTwo = ({onItemFocus}) => (
  <input type="text" onFocus={() => onItemFocus(2)} />
)

import React，{Component}来自“React”；
类EditorInterface扩展组件{
状态={
focusedItem:0
}
handleItemFocus=项目=>
this.setState（{focusedItem:item}）；
render（）{
返回(
);
}
}
const ContextMenu=（{focusedItem}）=>
focusedItem===1(
项目1的关联菜单
)：focusedItem==2(
项目2的关联菜单
) : (
没有项目是集中的
);
const EditableOne=（{onItemFocus}）=>(
onItemFocus（1）}/>
)
const EditableTwo=（{onItemFocus}）=>(
onItemFocus（2）}/>
)

关联菜单和可编辑项应共享同一父项。父项应跟踪当前正在编辑的项。关联菜单应使用此状态更改其形式或您计划放入其中的任何内容。父项还应包含所有子项的数组，以便关联菜单可以通过用于替换父项状态数组中的项的索引和新数据。

import React, {Component} from "react";

class EditorInterface extends Component {
  state = {
    focusedItem: 0
  }

  handleItemFocus = item =>
    this.setState({focusedItem: item});

  render() {
    return (
      <div>
        <ContextMenu focusedItem={this.state.focusedItem} />
        <EditableOne onItemFocus={this.handleItemFocus} />
        <EditableTwo onItemFocus={this.handleItemFocus} />
      </div>
    );
  }
}

const ContextMenu = ({ focusedItem }) =>
  focusedItem === 1 ? (
    <div>
      <span>Context Menu for Item 1</span>
    </div>
  ) : focusedItem === 2 ? (
    <div>
      <span>Context Menu for Item 2</span>
    </div>
  ) : (
    <div>
      <span>No item is focused</span>
    </div>
  );

const EditableOne = ({onItemFocus}) => (
  <input type="text" onFocus={() => onItemFocus(1)} />
)

const EditableTwo = ({onItemFocus}) => (
  <input type="text" onFocus={() => onItemFocus(2)} />
)