Question

你能告诉我如何在点击按钮时将一个组件移动到另一个组件吗？我从cdn获得了import { Component, OnInit } from '@angular/core'; import { Angular2TokenService } from 'angular2-token'; @Component({ selector: 'app-new-user', templateUrl: './new-user.component.html', styleUrls: ['./new-user.component.css'] }) export class NewUserComponent implements OnInit { constructor(private _tokenService: Angular2TokenService) { this._tokenService.init({ registerAccountPath: '/api/auth' }); } ngOnInit() { } register() { this._tokenService.registerAccount( 'test@example.com', 'password', 'password' ); } }。我不知道如何使用这个js ..我想显示react-router.js第一个组件`这里是我的代码

http://codepen.io/anon/pen/jVoZjW?editors=1010

second component on button click of

Answer 1

有很多方法可以实现，所有这些都有。这只是众多方法中的一种：

我在这个答案上留下了一个替代的答案： http://codepen.io/dirtyredz/pen/gLJeWY

class Abc extends React.Component {
  constructor(){
    super();
    this.state={first: true};
  }
  handle(){
    alert('move to second component')
    this.setState({first: false})
  }
  render (){
    return (
      <div>
        <button onClick={this.handle.bind(this)}>move to second page</button>
        {this.state.first == true && <Pqr/>}
        {this.state.first == false && <Sqr/>}
      </div>
    );
  }
}

class Pqr extends React.Component {
  render (){
    return (<div><h1>First</h1></div>)
  }
}
class Sqr extends React.Component {
  render (){
    return <h1>Second</h1>
  }
}
ReactDOM.render(<Abc/>,document.getElementById('root'));

这是一个快速的例子，就像我之前说的，其他人可能会更好，但这可以按预期工作。

如何在按钮点击时将一个组件移动到另一个组件？

1 个答案: