同じコンポーネントを2回レンダリングするonClick

Question

私はUIのために反応する電子アプリケーションを書いています。シェイプを追加しようとしています（長方形、正方形...）ので、シェイプごとにコンポーネントを作成しました。そして、私は形のリストを持っています。リストをクリックすると、対応する形が追加されます。しかし、私は同じ形状を2回追加して、私はできないようにしたいと思います。誰かがここで私を助けることができる？ 以下は私のコードです。

List.js

import React from 'react'; 

class List extends React.Component{ 



    render(){ 
     return (
      <div> 
       <li onClick={this.props.drawSquare}>Square</li> 
       <li onClick={this.props.drawRectangle}>Rectangle</li> 
       <li onClick={this.props.drawCircle}>Circle</li> 
      </div> 
    ); 
    } 
} 

export default List 

AppContainer.js

import React from 'react' 
import List from '../components/List' 
import Square from '../components/Square' 
import Rect from '../components/Rect' 
import Cir from '../components/Cir' 
import But from '../components/basic/button' 

const style={ 
    position: 'fixed', 
    width: '800', 
    height: '800' 
}; 

const butStyle={ 
    position: 'relative', 
    top: '500px' 
} 
const style1={ 
    borderStyle: 'groove', 
    position: 'fixed', 
    width: '500', 
    height: '500' 
}; 
class AppContainer extends React.Component{ 


    constructor(props) { 
     super(props); 
     this.state={squareclicked:0, 
     rectClicked:0, 
     circleClicked:0,}; 
    } 

    drawSquare(){ 
     console.log("inside square function"); 
     this.setState({squareclicked:this.state.squareclicked+1}) 
     console.log(this.state.squareclicked); 
    } 

    drawRectangle(){ 
     console.log("inside rect function"); 
     this.setState({rectClicked:this.state.rectClicked+1}) 
    } 

    drawCircle(){ 
     console.log("inside circle function"); 
     this.setState({circleClicked:this.state.circleClicked+1}) 
    } 


    render(){ 
     console.log('render called'); 
     return (
      <div style={style}> 
      <div id="mainAppDiv" > 

      <List drawSquare={this.drawSquare.bind(this)} 
      drawRectangle={this.drawRectangle.bind(this)} 
      drawCircle={this.drawCircle.bind(this)}/> 

      <div id="shapeConatinerDiv" style={style1}> 
      {this.state.squareclicked} 
      {this.state.squareclicked > 0 && (<Square/>)} 
      {this.state.circleClicked > 0 && (<Cir/>)} 
      {this.state.rectClicked > 0 && (<Rect/>)} 
      </div> 
      </div> 
      <div style={butStyle}> 
       <But/> 
      </div> 
      </div> 

     ); 

    } 
} 

export default AppContainer 

Square.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {Rectangle} from 'react-shapes'; 
import Rnd from 'react-rnd' 
import Modal from 'react-bootstrap/lib/Modal' 
import ColorPallete from './Badging/ColorPalette' 
import Button from 'react-bootstrap/lib/Button' 

const style = { 
    border: 'solid 1px', 

}; 

const style1={ 
    position: 'fixed', 
    width: '500', 
    height: '500' 
}; 

class Square extends React.Component{ 



    constructor(props) { 
     super(props); 
     this.state={w:100, 
      h:100, 
     col:{color:'#ff0000'}, 
     zIndex: 99, 
     modalShow: false, 
    }; 

    } 

    close(){ 
     this.setState({modalShow: false}); 
    } 

    onDrag(){ 
     console.log('hi'); 
    } 

    onResi(dir, styleSize, clientSize, delta){ 
     this.setState({w:clientSize.width}); 
     this.setState({h:clientSize.height}); 
    } 

    editSquare(){ 
     this.setState({ modalShow: true }); 
    } 

     render(props) { 
     return (

     <Rnd ref={c => { this.rnd = c; }} 
      initial={{ 
       x: parent.innerWidth/2 - 700, 
       y: parent.innerHeight/2 - 80, 
       width: this.state.w, 
       height: this.state.h, 
      }} 
      style={style} 
      minWidth={this.state.w} 
      minHeight={this.state.h} 
      maxWidth={500} 
      maxHeight={500} 
      bounds={'parent'} 
      lockAspectRatio={true} 
      onResize={this.onResi.bind(this)} 
      onDrag={this.onDrag.bind(this)} 
     > 
    <Rectangle width={this.state.w} height={this.state.h} fill={this.state.col} stroke={{color:'#E65243'}} strokeWidth={1} onClick={this.editSquare.bind(this)}/> 
     </Rnd > 


     ); 

    } 

} 

export default Square 

他の形状は、コードの同じ種類を有します。

今は1つの四角形しか追加できません。もう一度クリックすると何も起こりません。しかし、私は一度他の形を追加することができます。

Answer 1

要素を配列に追加し、要素の配列をレンダリングする必要があります。 助けてくれるいくつかの大まかなコードは次のとおりです。

Component { 
    constructor() { 
     super(props) 
     this.state = { elements: [] } 
    } 
    render() { 
     return (<div> 
      <div onClick={()=>this.add()}>Add</div> 
      <div>{this.state.elements}</div> 
     </div>) 
    } 
    add() { 
     this.setState({ 
      elements: this.state.elements.push(<div id={elements.length}>Element</div>) 
     }) 
    } 
}