Question

家庭组件

    import React, { Component } from 'react';
    import Two from 'components/Two.jsx'
    import One from 'components/One.jsx'

    class Home extends Component {
      constructor(props){
        super(props)
        this.state = {

        }
         this.one = React.createRef();
      }

      getData = (data) => {
        this.one.current.finalClick(data);
      }

      render() {
        return (
            <div>
              <Two shareData={this.getData} />
              <One ref={this.one} />
            </div>
        );
      }
    }

    export default Home;

一个组件：

    import React from 'react'

    class One extends React.Component {
        constructor(props){
            super(props);
            this.state={

            }
        }

        finalClick = (data) => {
            console.log(data)
        }

        render(){
            return (
                <div>

                </div>
            )
        }
    }

    export default One;

两个组成部分：

    import React from 'react'

    class Two extends React.Component {
        handleClick = (data) => {
            this.props.shareData(data)
        }

        render(){
            return (
                <div>
                    <br/>
                    <button className="btn btn-info" onClick={() => this.handleClick('hellow')}>click</button>
                </div>
            )
        }
    }

    export default Two;

在这里，我正试图从另一个组件中单击一个功能。不是父母或孩子的伴侣。

首先，我单击两个按钮，它将数据发送到Home Component。并且正在记录数据。

我想在Home组件中调用 getData（）之后，同时将数据发送到 finalClick（）方法。

我的 finalClick（）函数在一个组件中被单击，但是数据没有通过。

Answer 1

在Home状态下保存要共享的数据。通过Home的道具将函数从Two传递到Two，以更新数据。在道具中将数据从Home的状态传递到One。

在没有父子关系的情况下如何将数据从一个组件发送到另一个组件

1 个答案: