onClick ne rend pas nouveau réagir composant.

Je suis nouveau à réagir monde et j'ai de la ligne comme ceci:

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

et cliquez sur, vous obtiendrez hello imprimé sur la console. Maintenant, modifiez la ligne:

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

de maintenant, cliquez sur le bouton, j'attends la NewComponent d'être rendu. Mais il ne le fait pas.

Je ne suis pas sûr, pourquoi c'est le cas. Notez que j'ai le code ci-dessus dans le render méthode.

  • C'est juste pas comment ça marche. Où voudriez-vous que le composant de rendu?
  • sur la même page.
  • Mais où? Au-dessus du bouton? Ci-dessous le bouton? À l'intérieur du bouton? À l'intérieur de la onClick attribut? Quelque part d'autre? Actuellement votre gestionnaire de clic est quelque chose comme function() { React.createElement(...); }. Il ne veut pas faire n'importe quoi avec l'élément qui a été créé.
  • Oh, maintenant il sens, nous avons donc besoin de faire quelque chose comme React.render et donner à la zone dans laquelle doivent être renderd
  • La droite. Mais votre composant devrait probablement juste de l'état et de rendre le composant à côté du bouton après que le bouton a été cliqué.
  • Merci maintenant il sens, vous pouvez fournir la réponse que je peux accepter.
  • je vais avoir le même problème. t essayé la solution ci-dessous,mais sa ne fonctionne pas pour moi. pouvez vous s'il vous plaît regardez : stackoverflow.com/questions/42158143/...

InformationsquelleAutor batman | 2015-11-21
  1. 54

    Vous souhaitez probablement avec un état de composant qui montre l'autre élément, à côté du bouton après qu'il a été cliqué. Tout ce que vous devez faire est de vérifier si le bouton a été cliqué:

    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>
    );
  }
}
    • Salut.que faire si je veux charger seulement NewComponent sur la même page d'écraser tous les autres éléments, sans l'aide de réagir routeur?
    InformationsquelleAutor Felix Kling
  2. 5

    Voici un CodePen de le montrer en action.

    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")
);
    • Un stylo jamais tellement aidé. Je commence à avoir le rendu conditionnel question à propos de Réagir 🙂 merci!
    • Il a travaillé pour moi! Ty
    InformationsquelleAutor Brian Swisher
  3. 3

    Utiliser à la place:
    {this.state.clicked && <NewComponent />}

    InformationsquelleAutor Valentin Micu
  4. 0

    Vous devez définir l'état de la piste visibilité du composant. Par défaut à false, et onclick état réglé à true. Dans votre rendu faire quelque chose comme
    {ce.état.visible ? : null}

    InformationsquelleAutor Ian