如何将数据从类组件传递到功能组件，反之亦然答案

【问题标题】：How to pass the data from class component to functional component and vice verse如何将数据从类组件传递到功能组件，反之亦然
【发布时间】：2019-11-09 08:12:40
【问题描述】：

我想将一些数据从一个类组件推送到功能组件，反之亦然。我研究了很多，但我没有得到任何合适的解决方案。

这里是我的主要组件（类组件）

import MemberList from './component/AddList'
export default class material extends React.Component {


    constructor(props) {
        super(props);
        this.state = {
            Members: ''
        };


    }

 render() {

        return (<div> <MemberList data={this.state.Members}/>  </div>
        );
    }

在 members.js 中我已经实现了这个功能 https://codesandbox.io/s/runh6

const members = []; //here I want to load the values from class component
function DownshiftMultiple(props) {

  return (
    <Downshift>


        return (
          <div className={classes.container}>


          </div>
        );
      }}
    </Downshift>
  );
}




export default function IntegrationDownshift(props) {
  const classes = useStyles();

  return (
    <div >

      <DownshiftMultiple classes={classes} />

         </div>
  );
}

我试图借助道具来获取价值。我无法获取数据。

任何人都可以帮助解决这个问题。

【问题讨论】：

应该没问题，功能/类组件在通过 props 向下传递数据方面并没有太大区别。我看不出您链接的代码框与您的问题有何关系？您是否有一个代码框示例说明您的实现不起作用？您在什么时候将this.state.Members 设置为？
我已经更新了这个问题。在componentdidmount上。我将加载数据。而且我不知道如何将数据添加到 members.js 中的成员数组
看看这个medium.com/@ruthmpardee/…

标签： reactjs react-router material-ui react-component

【解决方案1】：

您可以从 props 中访问值。

function DownshiftMultiple(props) {

  const members = props.members; //here I want to load the values from class component

  return (
    <Downshift>
      return (
        <div className={classes.container}>


        </div>
     );
    }}
   </Downshift>
 );
}

【讨论】：

您也需要将members 作为道具传递。