Javascript 如何在reactJS中的两个组件之间传递元素

我最近开始学习reactjs，我很难理解状态及其使用方式。我已经构建了两个无状态组件（boxOne和boxTwo），我有一个属性“MoveMe”，我希望通过单击按钮（MoveButton）在这两个组件之间传递。下面是我在被卡住之前接触到的代码

   class MoveButton extends React.Component {
        render() {
            return (
                    <button className="thebutton">
                        Click To Move
                    </button>
            );
        }
    }
    class BoxOne extends React.Component {
        render() {
            return (
                    <div className="boxOne-container">
                        {this.props.name}
                    </div>
            );
        }
    }
    class BoxTwo extends React.Component {
        render() {
            return (
                    <div className="boxTwo-container">
                    </div>
            );
        }
    }
    function App() {
        return (
                <div>
                    <BoxOne name="Move Me" />
                    <BoxTwo />
                    <MoveButton />
                </div>
        );
    }
    ReactDOM.render(<App />,document.getElementById('container'));

class MoveButton扩展了React.Component{
render（）{
返回(
点击移动
);
}
}
类BoxOne扩展了React.Component{
render（）{
返回(
{this.props.name}
);
}
}
类box2扩展了React.Component{
render（）{
返回(
);
}
}
函数App（）{
返回(
);
}
ReactDOM.render（，document.getElementById（'container'））；

首先，我强烈建议您阅读整个react文档：（或者至少，开始阅读整个快速入门部分，它涵盖了您需要的所有基本内容）。它几乎涵盖了所有react（react的范围很小！）

你需要有某种状态。当前，您的类组件（MoveButton、BoxOne和BoxTwo）可以访问状态，但不使用状态。定义为函数的应用程序组件无权访问任何类型的自身状态

您的状态需要位于公共父组件中，然后可以将其作为道具传递给子组件。子组件可能是无状态的。在您的例子中，这将是应用程序组件，您可以使用一个类来代替它使react状态可用，而其他三个组件可以重写为无状态函数

现在我不明白你到底想做什么，我假设你想在点击按钮时将“move me”文本从一个框移动到另一个框。因此，这两个框都可以显示由父级控制的文本。两个框都可以有一个名为“name”的react道具，由父级（应用程序）接收。按钮本身需要发出一个事件（回调），该事件在父级中定义，并作为prop传递给按钮。我把那个道具叫做“扶手风”

实施过程可能如下所示：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

function BoxOne(props) {
    return (
        <div>BoxOne: {props.name}</div>
    );
}

function BoxTwo(props) {
    return (
        <div>BoxTwo: {props.name}</div>
    );
}

function MoveButton(props) {
    return (
        <button onClick={props.handleEvent}>Click to Move</button>
    );
}

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            boxOneName: 'Move me',
            boxTwoName: ''
        };

        this.handleEvent = this.handleEvent.bind(this);
    }

    handleEvent() {
        this.setState({
            boxOneName: this.state.boxTwoName,
            boxTwoName: this.state.boxOneName
        });
    }

    render() {
        return (
            <div>
                <BoxOne name={this.state.boxOneName}/>
                <BoxTwo name={this.state.boxTwoName}/>
                <MoveButton handleEvent={this.handleEvent}/>
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

import React，{Component}来自'React'；
从“react dom”导入react dom；
功能箱一（道具）{
返回(
BoxOne:{props.name}
);
}
功能盒2（道具）{
返回(
框二：{props.name}
);
}
功能按钮（道具）{
返回(
点击移动
);
}
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
boxOneName:“移动我”，
boxTwoName:“”
};
this.handleEvent=this.handleEvent.bind（this）；
}
handleEvent（）{
这是我的国家({
boxOneName:this.state.boxTwoName，
boxTwoName:this.state.boxOneName
});
}
render（）{
返回(
);
}
}
ReactDOM.render（，document.getElementById（'root'））；

示例中使用的所有内容都在快速入门指南中介绍

如果还有什么不清楚的地方，请告诉我：）

好吧，一切正常

下面是codepen在S-O之前死亡事件中的下一代代码（我认为您也可以在这里运行它？？）

类框扩展了React.Component{
render（）{
返回(
{this.props.name？this.props.name:“什么都没有”}
);
}
}
类MoveButton扩展React.Component{
render（）{
返回(
点击我
);
}
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
第一个按钮：true
};
this.on\u click\u handler=this.on\u click\u handler.bind（this）；
}
在_上单击_handler（）{
这是我的国家({
第一个按钮：！this.state[“第一个按钮”]
});
}
render（）{
返回(
);
}
}
ReactDOM.render（，document.getElementById（“app”）

当切换移动按钮时，每个框之间是否交替出现带有值“move me”的名称？单击移动按钮时，您希望发生什么？就像从用户的角度（唯一真正重要的角度）一样。@MiguelMota是的，当切换按钮时，值“move me”将在每个框之间交替。所以它会从BoxOne转到BoxTwo@AdamLeBlanc所以“Move Me”值将从框1开始，当用户单击按钮时，它将替换为框2，一旦他们再次单击按钮，它将替换为框1好的，我明白了。给我一秒钟。这不是一个很好的解决方案，因为你正在创建一个额外的组件类，没有理由这么做。重用同一个类会更好。为了简单起见，我尽可能地坚持使用您自己的示例。当然，您可以使用相同的Box组件：并完全删除BoxTwo。@Milant谢谢！此外，您还可以将所有这些组件（除了
App
）更改为无状态组件。我只是很快就完成了，不用花太多心思就让他们上了完整的课。谢谢！！这对我的学习很有帮助，尤其是你提供的步行体验。出于好奇，如果我不想在第二个框组件中出现任何东西（即，它上面写着“什么都没有”？），我会用什么方法（如果需要的时间太长，你不必详细说明）来处理我的想法，我注意到它开始改变