Javascript Reactjs-如何在单击按钮时在组件之间移动元素

我目前还不熟悉Reactjs，我希望能够移动一个元素（比如，就像两个组件之间的一个简单标题一样（我把它做成了两个简单的方框）.我开始了解如何实现按钮，我想我应该将其作为自己的组件来实现，因为它具有重要的功能。我达到的要点如下：

/*class MoveButton extends React.Component {
      handleClick() {
      alert("Button clicked");
  }

  render() {
     return (
       <button onClick={handleClick}>
         Click To Move
       </button>
    );
  }
 } */

 class BoxOne extends React.Component {
   render() {
     return (
      <div className="boxOne-container">
      </div>
   );
 }
}

   class BoxTwo extends React.Component {
     render() {
      return (
       <div className="boxTwo-container">
       </div>
     );
    }
   }

 function App() {
   return (
     <div>
       <BoxOne />
       <BoxTwo />
     </div>
   );
   }
 ReactDOM.render(<App />,document.getElementById('container'));

/*类MoveButton扩展React.Component{
handleClick（）{
警报（“点击按钮”）；
}
render（）{
返回(
点击移动
);
}
} */
类BoxOne扩展了React.Component{
render（）{
返回(
);
}
}
类box2扩展了React.Component{
render（）{
返回(
);
}
}
函数App（）{
返回(
);
}
ReactDOM.render（，document.getElementById（'container'））；

这是一个“移动按钮”的示例

class MoveButton extends React.Component {
    render() {
        return (
            <button onClick={this.props.onClick}>
                Click To Move
            </button>
        );
    }
}

class BoxOne extends React.Component {
    render() {
        return (
            <div className="boxOne-container">
                Box1
            </div>
        );
    }
}

class BoxTwo extends React.Component {
    render() {
        return (
            <div className="boxTwo-container">
                Box2
            </div>
        );
    }
}

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = { pos: 0 }
    }
    onClick() {
        this.setState({ pos: (this.state.pos + 1) % 3 })
    }
    render () { 
        return (
            <div>
                { this.state.pos === 0 ? <MoveButton onClick={this.onClick.bind(this)}/> : ''}
                <BoxOne />
                { this.state.pos === 1 ? <MoveButton onClick={this.onClick.bind(this)}/> : ''}
                <BoxTwo />
                { this.state.pos === 2 ? <MoveButton onClick={this.onClick.bind(this)}/> : ''}
            </div>
        );
    }
}

function App() {
    return (
        <App />
    );
}

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

class MoveButton扩展了React.Component{
render（）{
返回(
点击移动
);
}
}
类BoxOne扩展了React.Component{
render（）{
返回(
框1
);
}
}
类box2扩展了React.Component{
render（）{
返回(
框2
);
}
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
this.state={pos:0}
}
onClick（）{
this.setState（{pos:（this.state.pos+1）%3}）
}
呈现（）{
返回(
{this.state.pos==0？：''}
{this.state.pos==1？：''}
{this.state.pos==2？：''}
);
}
}
函数App（）{
返回(
);
}
ReactDOM.render（，document.getElementById（'container'））；

更具体一点。您想移动什么？@dfsq我想使用按钮将标题从BoxOne移动到BoxTwo，反之亦然，等等。这非常好，谢谢。单击按钮时，是否还有一种方法可以在两个框组件之间移动“Box1”和“Box2”之类的文本？（这样按钮就可以保持不变）