onClick（反応）でコンポーネントをレンダリングする最良の方法は？

Question

私がやろうとしていること：ユーザーがボタンをクリックすると、新しいコンポーネントがレンダリングされます（そのコンポーネントにはイメージが格納されます）。

問題：私が設定した方法で、ユーザーがクリックすると、handleClick関数は状態をtrueに反転し、コンポーネントをロードします。しかし、これは一度しか動作しません。スイッチを入れ替えるのではなく、新しいコンポーネントを作成しておきたいのですが、私は比較的新しいコーダーであり、これについてどうやってどうやって進むのか分かりません。

は、この上のヘルプをお願い申し上げ:)

配列を保持する状態を設定し

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 
import Card from './card.js'; 

class App extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
     clicked: false 
     }; 
    this.handleClick = this.handleClick.bind(this); 

    } 

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


    render() { 
    return (
     <div className="App"> 
     <h3 className="header">Random.</h3> 


<div className="hi"> 
     <button onClick={this.handleClick}>Hit Me.</button> 
</div> 
     {this.state.clicked ? <Card /> : null} 
     </div> 
    ); 
    } 
} 

export default App; 

Answer 1

。

this.state = { feedItems: [] } 

クリックごとに、配列に項目を追加します。

let { feedItems } = this.state; 
feedItems = feedItems.slice(); 
feedItems.push({ imageUrl: 'some url' }); 
this.setState({ feedItems });