如何在反应中将数据从子容器导入父容器？

Posted 2023-02-23

【中文标题】如何在反应中将数据从子容器导入父容器？

【英文标题】：How can I import data from the child container to the parent container in react?

【发布时间】：2020-04-02 18:56:20

【问题描述】：

父组件

import React, Component from 'react';
import NameContainer from '../nameContainer/index'


export default class Vishal extends Component 
    constructor(props) 
        super(props);
        this.state = 
            data: "This is the data"
        
    

      render() 
          return(
              <div>
                <p>My name is Vishal</p>
              </div>
          )
      

子组件

import React, Component from 'react';

export default class NameContainer extends Component 

如何使用回调函数和import from the child component？任何帮助将不胜感激

【问题讨论】：

这能回答你的问题吗？***.com/questions/58273144/…

嗨，我想打印数据而不是在文本字段中输入。只是想让父组件通过回调函数从子组件中获取数据并打印出来。

【参考方案1】：

这违反了自上而下的 react 哲学和任何形式的劫持，这可能不是你想要的方向。

我认为您的意思是在父容器中有状态，并允许子容器显示和更新该状态。

即Parent.JS

import React, Component from 'react';

export default class NameContainer extends Component 
    this.state =  name: 'Vishal' 

handleChange = this.setState(name: event.target.value) 

render()  
    return (
          <Vishal name=this.state.name handleChange=this.handleChange />     )

然后在子js中 // Vishal.js

  ...boilerplate 
 handleChange = this.props.handleChange; // and e.g a button or textfield to allow the user to update the name.

 render()  
     return ( this.props.name)  

这将在子组件Vishal.js中显示来自Parent.js的name的状态数据（初始化为'Vishal'）

【讨论】：

您好，感谢您的回复。我只希望父组件从子组件中获取数据并在没有文本字段的情况下打印数据。你能帮忙吗？

是的，我写的代码应该允许你这样做，但你有父子切换。如果不进行一些非常令人困惑的扭曲，您不能让孩子持有状态并告诉父母是什么状态 --> 可能不是您想要的。

好的，谢谢。那么这是否意味着子组件无法将数据推送到父组件？

您可以从子级更新父级状态。您可以在孩子中显示父母的状态。你可以让孩子有自己的状态。你可以做更多的事情，但我强烈反对你这样做。这会让你的例子太混乱

感谢您的帮助 :) 非常感谢。