有没有办法重用 react-native 中的组件？

Question

I'm new in react-native and I can't figure out if this is possible what i mean is create a complement for example a button, it would be:

    Class button extends Component {
     
     render() {
         return (
            <Button title = "button"> </Button>
          );
       } 
    }

To use this I should import it and then add it to the render function where I want to use it:

Import Button from "../component/Button.js"

    Class Hi extends component {
       
      render() {
         return (
            <Button></Button>
        );
       } 
    }

Now, my question is, imagine in the class hi there's another button, that button when i click on it it will automatically add the button from the class button, if a click it two times it has to add two new buttons, is like doing this:

Import Button from "../component/Button.js"

    Class Hi extends component {

      render() {
         return (
            <Button></Button>
            <Button></Button>
            <Button></Button>
        );
       } 
    }

Answer 1

What you can do is use a counter to count clicks.

Import Button from "../component/Button.js"

Class Hi extends component {
  constructor(props){
    super(props)
    this.state = {
      buttonCount : 1
    }
    incrementCount = this.incrementCount.bind(this)
  }
  incrementCount(){
    let cnt=this.state.buttonCount
    this.setState({
      buttonCount : cnt+1
    })
  }
  render() {
    let buttons=[]
    for(let i=1;i<=this.state.buttonCount;i++){
      buttons.push(<Button key={i} onClick={incrementCount}/>)
    }
     return (
        {buttons}
    );
   } 
}