как показать значение приращения счетчика на иконке на следующей странице после нажатия кнопки с первой страницы

Question

 class ContentPage extends Component {

     constructor(){
    super()
    this.state = {
      data: '',
      count: 0 , 
    }
    this.handleClick = this.handleClick.bind(this)
        this.deletehandle = this.deletehandle.bind(this)

  }

      handleClick(){
    this.setState(prevState => {
      return {
        count: prevState.count + 1
      }
    })
  }
   deletehandle(){
  if (this.state.count === 0) {
      this.setState({
        counter: 0
      });
    } else {
      this.setState(prevState => ({
        count: this.state.count - 1
      }));
    }

   }

это мой код приращения и уменьшения на первой странице, и после нажатия на ручку нажатия он увеличивается, и значение состояния, которое я хочу показать, находится на следующей странице на значке, который я использовал

{this.state .count}

          </View>
          <View style={{alignItems:'flex-end',alignContent:'flex-end',marginLeft:260}}>
     <View style={{flexDirection:'row'}}>
            <Text style={{fontSize: 18}}> Quantity : </Text><Text style={{fontSize:18}}>{this.state.count}</Text>
          </View>
         </View>



<View style={{height: 4, width: 30}} />
            <TouchableOpacity
            // onPress={this._AddCart}
            onPress={this.handleClick}
              style={{
                height: 40,
                width: 130,
                backgroundColor: 'orange',
                justifyContent: 'center',
                alignItems: 'center',
                borderRadius:8
              }}>
              <Text style={{color:"#FFFFFF",fontSize:15}} >Add to Cart{this.state.count}</Text>
            </TouchableOpacity>

отредактировал мой код, теперь показывающий состояние моего счета на той же странице, но я хочу показать свои номера счетчиков на следующем экране?

Answer 1

Вам необходимо передать свойство count компоненту, в котором вы хотите его использовать (точно так же, как @Sourav Singh показал в своем ответе). Я составил для вас пример увеличения / уменьшения, надеюсь, вы найдете его полезным:

https://codesandbox.io/s/react-typescript-429re

Кроме того, вы можете найти некоторые интересные идеи в Компоненты и реквизит статья из официальной документации React.

Answer 2

Этот пример просто фокусируется на том, как передать данные в качестве реквизита от родительского к дочернему компоненту. Поэтому, пожалуйста, игнорируйте синтаксис и другие вопросы.

// Parent Component
class ParentComponent extends Component {
  // Pass count to Child Component as props
  <ChildComponent count={this.state.count}/>
}


// Child Component
class ChildComponent extends Component {
  // call count in child component using props
  this.props.count  
}