Question

我正在尝试将笔记保存到localStorage（或本例中的localforage）中。我有一个简单的文本区域，带有一个名为“保存”的按钮。保存按钮位于下面指示的另一个文件中。

我用一个发现的例子here来尝试设置项目。

这是我写的代码：

  SaveMessage() {
    var message = <Notepad></Notepad>;
    reactLocalforage
      .SetItem("Message", message, function(message) {
        console.log(message);
      })
      .catch(function(err) {
        console.log(err);
      });
  }

我不太确定var消息是什么。记事本是另一个组件，其代码包含文本区域和按钮：

      <div className="button-container">
        <button
          className="save-button"
          onClick={() => {
            props.onSaveMessage(saveMessage);
          }}
        >
          Save
        </button>

        <button className="remove-button">Show all</button>
      </div>

它说onClick的区域是我希望有一种方法可以将SaveMessage与localforage一起使用render() { return ( <div> <Notepad onSaveMessage={this.SaveMessage}></Notepad> </div> ); }方法，我最初是尝试将其创建为道具（来自教程），所以在主要方法中，我会得到：

      <button
        className="save-button"
        onClick={() => {
          props.onSaveMessage();
        }}
      >
        Save
      </button>

，然后在记事本组件上：

onSaveMessage(saveMessage)

当我单击应用程序上的“保存”按钮时，希望在浏览器的本地存储中进行一些设置，但出现异常：

TypeError：无法将类作为函数调用

当我在上面的保存消息代码上设置项目时，并尝试将其作为道具RetryTemplate调用时，就会发生错误。

Answer 1

您没有添加足够的代码来解决您的确切问题，但是我可以帮助您了解如何继续解决该问题。在React中，当您想在组件之间共享信息时，您需要将该数据lift放入父组件中，然后通过props进行共享。如果您的组件树很深刻，那么此任务可能会很乏味。因此，已经开发了一些库来管理应用程序的状态。

我建议您首先从React docs页面阅读"Lifting State Up"。为了帮助您将这些概念应用于当前情况，我创建了一个CodeSandbox，我试图在其中复制您的情况。 You can find it here.

一旦您了解了“提升”状态的必要性，以及如何通过props共享数据和操作，就可以迁移到状态处理程序工具。其中一些是：

还有更多。这不是详尽的清单，也不是最好的清单，只是我使用过的清单，可以保证它们可以为您提供帮助。

我希望这会有所帮助。

如何在另一个组件的主要组件中使用方法

1 个答案: