リアクションボタンが1回以上レンダリングされない

Question

新しいコンポーネントをレンダリングするためのボタンがあります（実際にはグラフを表示していますが、テキストのみを表示するようにしました）。初めてクリックしたときにテキストを追加します追加のクリックで新しいテキストオブジェクトをページに追加します。

私は、関数が実際に実行されているかどうかをテストしました。なぜなら、その要素が配列に要素を追加することによって複数回押しているからです。なぜ新しいテキストオブジェクトをページにレンダリングしないのですか？複数回クリックすると

私は基本的な何かを見逃している可能性があり、説明に感謝します。

import React from 'react'; 
import './App.css'; 

class NewChart extends React.Component { 
    render() { 
    return (
     <div>Text</div> 
    ); 
    } 
} 

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

class ChartApp 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 ? <NewChart />: null} 
     </div> 
    ); 
    } 
}; 

export default React.createClass({ 
    render: function() { 
    return (
     <div> 
     <ChartApp> 
     </ChartApp> 
     </div> 
    ) 
    } 
}); 

Answer 1

現在、単一のフラグをtrueに設定し、そのフラグがtrueの場合にコンポーネントをレンダリングするボタンを使用しています。複数のコンポーネントをレンダリングする場合は、レンダリングするコンポーネントの数に関係する状態をいくつか必要とし、それに基づいてレンダリングします。たとえば、配列やカウンタ変数を使用する場合は、.mapまたはforループを使用して複数のコンポーネントをレンダリングすることができます。今はただ一つのNewChartコンポーネントを条件付きでレンダリングするようReactに頼んでいるだけです。

Answer 2

問題は、新しいアイテムを追加するのではなく、レンダリングするかどうかという値に応じて、checkedの値に依存します。このトリックは、ボタンをクリックするたびに要素を1つずつ追加して追加する要素の配列を持つことです。ここで

あなたは作業例を持っている：

import React from 'react'; 
import './App.css'; 

class NewChart extends React.Component { 
    render() { 
    return (
     <div key={this.props.key}>Text</div> 
    ); 
    } 
} 

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

class ChartApp extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     elements: [] 
    }; 
    this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
    var newArray = this.state.elements.slice(); 
    newArray.push(<NewChart key={this.state.elements.length + 1}/>); 
    this.setState({ 
     elements: newArray 
    }); 
    } 

    render() { 
    return (
     <div> 
     <Button onClick={this.handleClick} /> 
     {this.state.elements.map((elem) => { 
      return elem; 
     })} 
     </div> 
    ); 
    } 
} 

class App extends React.Component { 
    render() { 
    return (
     <div> 
     <ChartApp /> 
     </div> 
    ) 
    } 
} 

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