React 基础：在组件之间传递数据

在 React 中的组件之间传递数据是一个非常强大的概念。

在本文中，我们将研究以下两件事：

• 从父级向子级发送数据
• 将数据从孩子发送给父母

对于这个概念，我们需要使用useState钩子。直到现在你还没有看到那个钩子。有时间我再详细写。

我们今天的结果将如下所示：

在 React 中将数据从父组件发送到子组件永久链接

React 中最轻松的数据流是自上而下地将数据从父组件传递到子组件。

让我们以当前的示例为起点。

下载 GitHub 存储库

在这个 repo 中，我们构建了一个简单的书架，上面放着几本书。

在最后一个例子中，我们循环了我们的书，但我们想将这些书作为一个对象传递。

我们可以通过像这样设置参数将它们传递到我们的书架：

<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-jsx"><span style="color:#ffa07a"><span style="color:#ffa07a"><span style="color:#fefefe"><</span>Bookshelf</span> <span style="color:#abe338">books</span><span style="color:#fefefe">=</span><span style="color:#fefefe">{</span>books<span style="color:#fefefe">}</span><span style="color:#fefefe">></span></span><span style="color:#ffa07a"><span style="color:#ffa07a"><span style="color:#fefefe"></</span>Bookshelf</span><span style="color:#fefefe">></span></span></code></span>

然后我们需要做的就是将我们的书架代码更改为如下所示：

<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-jsx"><span style="color:#00e0e0">import</span> Book <span style="color:#00e0e0">from</span> <span style="color:#abe338">'./Book'</span><span style="color:#fefefe">;</span>

<span style="color:#00e0e0">export</span> <span style="color:#00e0e0">default</span> <span style="color:#00e0e0">function</span> <span style="color:gold">Bookshelf</span><span style="color:#fefefe">(</span><span style="color:#fefefe">{</span> books <span style="color:#fefefe">}</span><span style="color:#fefefe">)</span> <span style="color:#fefefe">{</span>
  <span style="color:#00e0e0">return</span> <span style="color:#fefefe">(</span>
    <span style="color:#ffa07a"><span style="color:#ffa07a"><span style="color:#fefefe"><</span>div</span><span style="color:#fefefe">></span></span>
      <span style="color:#fefefe">{</span>books<span style="color:#fefefe">.</span><span style="color:gold">map</span><span style="color:#fefefe">(</span><span style="color:#fefefe">(</span>book<span style="color:#fefefe">)</span> <span style="color:#00e0e0">=></span> <span style="color:#fefefe">(</span>
        <span style="color:#ffa07a"><span style="color:#ffa07a"><span style="color:#fefefe"><</span>Book</span> <span style="color:#abe338">title</span><span style="color:#fefefe">=</span><span style="color:#fefefe">{</span>book<span style="color:#fefefe">.</span>title<span style="color:#fefefe">}</span> <span style="color:#abe338">key</span><span style="color:#fefefe">=</span><span style="color:#fefefe">{</span>book<span style="color:#fefefe">.</span>id<span style="color:#fefefe">}</span> <span style="color:#fefefe">/></span></span>
      <span style="color:#fefefe">)</span><span style="color:#fefefe">)</span><span style="color:#fefefe">}</span>
    <span style="color:#ffa07a"><span style="color:#ffa07a"><span style="color:#fefefe"></</span>div</span><span style="color:#fefefe">></span></span>
  <span style="color:#fefefe">)</span><span style="color:#fefefe">;</span>
<span style="color:#fefefe">}</span></code></span>

这进一步分离了我们的数据，我们现在可以用自己的一套书创建多个书架。

这样做很酷的部分是它也可以在特定的动作上完成。

让我们回到我们的App.js文件并设置一个新状态来向您展示我的意思。

<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-jsx"><span style="color:#00e0e0">const</span> <span style="color:#fefefe">[</span>books<span style="color:#fefefe">,</span> setBooks<span style="color:#fefefe">]</span> <span style="color:#00e0e0">=</span> <span style="color:gold">useState</span><span style="color:#fefefe">(</span><span style="color:#fefefe">[</span><span style="color:#fefefe">]</span><span style="color:#fefefe">)</span><span style="color:#fefefe">;</span></code></span>

请注意，我们也将其命名books为，因此将顶部数据集重命名为booksData

现在我们可以添加一个按钮来onClick加载我们的书籍。

<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-jsx"><span style="color:#ffa07a"><span style="color:#ffa07a"><span style="color:#fefefe"><</span>button</span> <span style="color:#abe338">onClick</span><span style="color:#fefefe">=</span><span style="color:#fefefe">{</span><span style="color:#fefefe">(</span><span style="color:#fefefe">)</span> <span style="color:#00e0e0">=></span> <span style="color:gold">setBooks</span><span style="color:#fefefe">(</span>booksData<span style="color:#fefefe">)</span><span style="color:#fefefe">}</span><span style="color:#fefefe">></span></span>Load the books<span style="color:#ffa07a"><span style="color:#ffa07a"><span style="color:#fefefe"></</span>button</span><span style="color:#fefefe">></span></span></code></span>

现在你走了，我们的书只有在我们点击按钮时才会加载。

在 React 中将数据从子组件发送到父组件永久链接

现在我们可以将数据从我们的父组件发送到我们的子组件，让我们看看它是如何工作的。

我们想要实现的是我们可以选择知道点击了哪本书。

但是，对于这种方法，父组件必须有一种方法来接收这些数据。

让我们打开我们的Bookshelf.js代码，因为它充当我们实际书籍的父级。添加新状态以跟踪当前书籍。

<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-jsx"><span style="color:#00e0e0">const</span> <span style="color:#fefefe">[</span>currentBook<span style="color:#fefefe">,</span> setCurrentBook<span style="color:#fefefe">]</span> <span style="color:#00e0e0">=</span> <span style="color:gold">useState</span><span style="color:#fefefe">(</span><span style="color:#abe338">''</span><span style="color:#fefefe">)</span><span style="color:#fefefe">;</span></code></span>

然后我们可以显示当前的书，如果它被设置了：

<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-jsx"><span style="color:#fefefe">{</span>currentBook <span style="color:#00e0e0">&&</span> <span style="color:#ffa07a"><span style="color:#ffa07a"><span style="color:#fefefe"><</span>h1</span><span style="color:#fefefe">></span></span>Currently reading: <span style="color:#fefefe">{</span>currentBook<span style="color:#fefefe">}</span><span style="color:#ffa07a"><span style="color:#ffa07a"><span style="color:#fefefe"></</span>h1</span><span style="color:#fefefe">></span></span><span style="color:#fefefe">}</span></code></span>

我们要做的最后一件事是将 set 函数传递给我们的 book 组件，如下所示：

<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-jsx"><span style="color:#ffa07a"><span style="color:#ffa07a"><span style="color:#fefefe"><</span>Book</span>
  <span style="color:#abe338">setCurrentBook</span><span style="color:#fefefe">=</span><span style="color:#fefefe">{</span>setCurrentBook<span style="color:#fefefe">}</span>
  <span style="color:#abe338">title</span><span style="color:#fefefe">=</span><span style="color:#fefefe">{</span>book<span style="color:#fefefe">.</span>title<span style="color:#fefefe">}</span>
  <span style="color:#abe338">key</span><span style="color:#fefefe">=</span><span style="color:#fefefe">{</span>book<span style="color:#fefefe">.</span>id<span style="color:#fefefe">}</span>
<span style="color:#fefefe">/></span></span></code></span>

在 book 组件内部，我们需要接受这个函数作为参数。我们可以添加一个onClick处理程序来调用这个函数并将标题传回。

<span style="color:#f8f8f2"><code style="margin-left:396px" class="language-jsx"><span style="color:#00e0e0">export</span> <span style="color:#00e0e0">default</span> <span style="color:#00e0e0">function</span> <span style="color:gold">Book</span><span style="color:#fefefe">(</span><span style="color:#fefefe">{</span> title<span style="color:#fefefe">,</span> setCurrentBook <span style="color:#fefefe">}</span><span style="color:#fefefe">)</span> <span style="color:#fefefe">{</span>
  <span style="color:#00e0e0">return</span> <span style="color:#ffa07a"><span style="color:#ffa07a"><span style="color:#fefefe"><</span>div</span> <span style="color:#abe338">onClick</span><span style="color:#fefefe">=</span><span style="color:#fefefe">{</span><span style="color:#fefefe">(</span><span style="color:#fefefe">)</span> <span style="color:#00e0e0">=></span> <span style="color:gold">setCurrentBook</span><span style="color:#fefefe">(</span>title<span style="color:#fefefe">)</span><span style="color:#fefefe">}</span><span style="color:#fefefe">></span></span><span style="color:#fefefe">{</span>title<span style="color:#fefefe">}</span><span style="color:#ffa07a"><span style="color:#ffa07a"><span style="color:#fefefe"></</span>div</span><span style="color:#fefefe">></span></span><span style="color:#fefefe">;</span>
<span style="color:#fefefe">}</span></code></span>

你去吧。我们现在可以通过两种方式绑定数据。从父母到孩子，反之亦然。

你可以在上面找到完整的代码 GitHub.

感谢您的阅读，让我们联系！永久链接

感谢您阅读我的博客。随时订阅我的电子邮件通讯并连接Facebook 或者 推特