onclick은 새 반응 구성요소를 렌더링하지 않습니다.

onclick은 새 반응 구성요소를 렌더링하지 않습니다.

저는 리액션 세계에 처음 와보는 사람이고, 이런 대사가 있습니다.

<Button onClick={() => console.log("hello")}>Button</Button>

클릭하시면hello콘솔에 인쇄되어 있습니다.이제 회선을 다음으로 변경합니다.

<Button onClick={() => <NewComponent />}>Button</Button>

이제 버튼을 클릭해서, 나는 예상한다.NewComponent렌더링할 수 있습니다.하지만 그렇지 않다.

왜 그런지 잘 모르겠어요.위의 코드가 에 있는 것에 주의해 주세요.render방법.

버튼 옆에 다른 컴포넌트를 표시하는 상태 저장 컴포넌트가 필요할 수 있습니다.버튼 클릭 여부만 추적하면 됩니다.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showComponent: false,
    };
    this._onButtonClick = this._onButtonClick.bind(this);
  }

  _onButtonClick() {
    this.setState({
      showComponent: true,
    });
  }

  render() {
    return (
      <div>
        <Button onClick={this._onButtonClick}>Button</Button>
        {this.state.showComponent ?
           <NewComponent /> :
           null
        }
      </div>
    );
  }
}

여기 CodePen이 있습니다.

HTML

<div id="root">loading...</div>

JSX

class NewComponent extends React.Component {
  render() {
    return (
      <div {...this.props}>
        new component
      </div>
    );
  }  
}

class Button extends React.Component {
  render() {
    return (
      <button {...this.props}>
        click
      </button>
    );
  }  
}

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      clicked: false
    };

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

  handleClick() {
    this.setState({
      clicked: true
    });
  }

  render() {
    return (
      <div>
        <Button onClick={this.handleClick} />
        {this.state.clicked ? <NewComponent /> : null}
      </div>
    );
  }
};

React.render(
  <App />,
  document.getElementById("root")
);

대신 사용:{this.state.clicked && <NewComponent />}

react-router-dom의 Router()와 함께 사용할 수 있습니다.사용할 때<Route path='/path' component={newComponent} />react-router-dom은 "history, location, match"라는 세 가지 소품을 전달합니다.onClick에서 전체 컴포넌트를 Router()와 함께 전달하기만 하면 다음과 같이 이력 소품의 push() 함수를 사용할 수 있습니다.

JSX

import { withRouter } from 'react-router-dom' ;
import Button from 'buttonFolder/button.component';
const yourComponent = ({history}) => {

return (
       <Button onClick{() => history.push.('/path')}> New componentPage </Button>
)};

export default withRouter(yourComponent);

컴포넌트의 가시성을 추적하려면 상태를 설정해야 합니다.기본값은 false이고 set state를 true로 클릭합니다.렌더에서 {this.state.visible? : null}과 같은 작업을 수행합니다.

언급URL : https://stackoverflow.com/questions/33840150/onclick-doesnt-render-new-react-component