有沒有辦法重用 react-native 中的組件？

Question

我是 react-native 的新手，我不知道這是否可能我的意思是創建一個補充，例如一個按鈕，它將是：

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

要使用它，我應該導入它，然后將它添加到我想使用它的渲染 function 中：

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

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

現在，我的問題是，想象在 class 嗨還有另一個按鈕，當我點擊它時，它會自動從 class 按鈕添加按鈕，如果點擊兩次它必須添加兩個新按鈕，就像在做這個：

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

    Class Hi extends component {

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

Answer 1

您可以做的是使用計數器來計算點擊次數。

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}
    );
   } 
}