在React.js中如何在两个子组件之间传递数据?

huangapple go评论65阅读模式
英文:

How to pass data between two child components in react js?

问题

我想获得关于如何完成这个任务的一些建议,如何在React中在两个子组件之间传递数据。

我的代码架构如下:-

父组件
---子组件 1
---子组件 2
---子组件 3

现在我想从子组件 1 传递一些数据给子组件 2。
那么如何实现它,最佳方法是什么?

这是我的代码示例。

父组件代码:

import './css/style.css';
const Parent = () => {
  return (
         <div>
            <Child 1 />
            <Child 2 />  
            <Child 3 />
         </div>
  );
};
export default Parent;

因此,在子组件 1 中,我想要一个 onClick() 事件,它将调用子组件 2 中的一个方法。如何实现这一点?

并且我想要从子组件 1 中将数据发送到父组件。如何实现这一点?

英文:

I want some suggestions on how this thing can be done, how can I pass data between two child components in react.
My code architecture is something like this:-

Parent 
---Child 1
---Child 2
---Child 3

Now I want to pass some data from child 1 to child 2.
So how it can be done and what will be the best approach for it.

This is my code sample.

Parent code:

import &#39;./css/style.css&#39;;
const parent = () =&gt; {
  return (
         &lt;div&gt;
            &lt;Child 1 /&gt;
            &lt;Child 2 /&gt;  
            &lt;Child 3 /&gt;
         &lt;/div&gt;
  );
};
export default parent;

So, here in child 1 I want a onClick() event which will call a method in child 2 component. How it can be done?

And I want to send data from Child 1 component to parent component. How it can be done?

答案1

得分: 1

你可以通过将回调函数传递给共同的父组件,然后从父组件传递给子组件来实现。对于简单的应用程序来说,这是一种简单的方法。或者也可以使用React.Context,或状态管理器,比如Redux、Mobx、Mobx State Tree。

英文:

You can do it by passing callback function to common parent component and then from parrent component to childs. Simple way for simple apps. Or also it's possible with React.Context, or state managers sush as Redux, Mobx, Mobx State tree.

huangapple
  • 本文由 发表于 2023年3月9日 16:41:30
  • 转载请务必保留本文链接:https://go.coder-hub.com/75682168.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定