reactjs 在React的父级中多次调用子级时，从子级到父级获取数据

z31licg0 于 2023-02-15 发布在 React

关注(0)|答案(1)|浏览(94)

我知道我可以使用一个处理函数来从子组件到父组件获取数据。

const Parent = () => {
  const [message, setMessage] = React.useState("Hello World");
  const chooseMessage = (message) => {
    setMessage(message);
  };
  return (
    <div>
      <h1>{message}</h1>
      <Child chooseMessage={chooseMessage} />
    </div>
  );
};

const Child = ({ chooseMessage }) => {
  let msg = 'Goodbye';
  return (
    <div>
      <button onClick={() => chooseMessage(msg)}>Change    Message</button>
    </div>
  );
};

如果我在同一个组件中多次使用<Child />会怎么样？在这种情况下我将如何处理数据。

const Parent = () => {
  const [message, setMessage] = React.useState("Hello World");
  const chooseMessage = (message) => {
    setMessage(message);
  };
  return (
    <div>
      <h1>{message}</h1>
      <Child chooseMessage={chooseMessage} />
      <Child chooseMessage={chooseMessage} />
      <Child chooseMessage={chooseMessage} />
      <Child chooseMessage={chooseMessage} />
    </div>
  );
};

处理这个问题的最佳方法是什么。
先谢了...

reactjs

来源：https://stackoverflow.com/questions/75444170/get-data-from-child-to-parent-while-calling-child-multiple-times-in-parent-in-re

1条答案

按热度按时间

mu0hgdu01#

你没有给你的问题添加多少上下文，所以我将尽我所能回答它。
你希望有多个信息从N个子节点传递到父节点，并且（我假设）你不能在Parent中创建那么多的状态，因为数量是动态的，你想做的是有一个数组作为父节点中的状态，让每个子节点有一个数组的索引，让它只在该索引处操作数组中的元素。
https://codesandbox.io/s/hardcore-mclean-f8dzmf?file=/src/Parent.jsx
这是一个简单的演示，我只修改了Parent，根本没有修改Child，代码如下：
Parent.jsx

const Parent = () => {
  const [messages, setMessage] = useState([
    "Hello 1",
    "Hello 2",
    "Hello 3",
    "Hello 4"
  ]); // ⭐(1)⭐
  const chooseMessage = (message, index) => {
    const newMessages = [...messages]; // ⭐(2)⭐
    newMessages[index] = message;
    setMessage(newMessages);
  }; 
  return (
    <div>
      {messages.map((message, index) => (
        <h2 key={index}>{message}</h2>
      ))}
      <!-- ⭐(3)⭐ -->
      <Child key="0" chooseMessage={(message) => chooseMessage(message, 0)} />
      <Child key="1" chooseMessage={(message) => chooseMessage(message, 1)} />
      <Child key="2" chooseMessage={(message) => chooseMessage(message, 2)} />
      <Child key="3" chooseMessage={(message) => chooseMessage(message, 3)} />
    </div>
  );
};

在（1）中，你可以看到状态是一个数组，在你的应用程序中，我假设子元素的数量是动态的，所以从一个空数组开始，随着子元素数量的增加，向其中添加元素。
在（2）中，你可以看到setState函数有点奇怪，为什么我用的是const newMessages = [...messages]，而不是const newMessages = messages，这是一种对数组中元素的变化做出React的方法，因为默认情况下，它不会对数组中元素的变化做出React，也不会对数组本身的变化做出React。
在（3），你可以看到传递的chooseMessage有一点不同，所以为了演示的目的，我只是将子节点的数量设置为4，并手动设置每个子节点的索引，然后创建匿名函数传递给子节点，这样Child中的代码就不需要修改了。我假设您需要通过某种.map函数动态创建这些子对象，就像我对<h2>标记所做的那样。
希望这个有用。

赞(0）回复(0）举报 2023-02-15

我来回答

reactjs 在React的父级中多次调用子级时，从子级到父级获取数据

1条答案

相关问题

热门标签

最新问答