Question

我正在编辑一个编辑器，其中我想要一个根据所选项目而改变的上下文菜单（锚定菜单，而不是弹出菜单）：例如当我编辑第一项时，我得到第一项的上下文菜单，当我编辑第二项时，我得到了第二项的上下文菜单。

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

我不确定React-y最常用的方法是什么。我的直觉是拥有这样的组件层次结构（描述子项）：

EditorInterface
    - [EditableOne, EditableTwo, ...]
    - ContextMenu

然后将onFocus回调传递给EditableOne等，但后来我不确定如何根据这一点更新EditorMenu组件。也许这根本不是解决这个问题的正确方法。

EditorMenu组件也需要能够与Item组件通信（表示更改），这表明EditorMenu应该是Item的子组件1}}（因为与上述Item相关联的所有州都应该保留在Item中并且仅在那里保留。

提示赞赏！

Answer 1

当您在React中进行开发时，Parent将控制其Child，因此您应始终为lifting your state up。另外，请查看thinking in 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)} />
)

基于所选组件改变React中的上下文菜单

1 个答案: