Mam stronę z komponentem. Chcę mieć możliwość nadania komponentowi niestandardowych wartości na podstawie danych. Jeśli spojrzymy na ten zrzut ekranu

2 komponenty tutaj

Wywoływane są 2 takie same komponenty. Góra ma klucz z wartościami, a dół to klucz z wartościami. Górny składnik przesłany ma wartość 50, a dolny przesłany - 100.

Zaktualizuje się, pobierając dane skądś (nie zastanawiałem się jeszcze, gdzie, ale na pewno nie zostanie zakodowany na stałe).

Oto jak skonfigurowałem ten komponent.

import React, { Component } from 'react'



export class SwatchElement extends Component {
    constructor(props){   
        super(props); 
        this.state = {
            Submitted: this.props.Submitted, // Submitted : this.props.Submitted 
            Redeemed: 50,
            PaymentInProgress: 85,
            PaymentFailed:25,
            Settled:60,
            Expired:10,
        }
        }


    render() {
        return (
            <div>
                <div class="list-container">
                  <ul class="swatch">
                      <li class="swatch__elem" name="Submitted">Submitted <span class="used-space">{this.state.Submitted}</span></li>
                      <li class="swatch__elem" name="Redeemed">Redeemed <span class="used-space">{this.state.Redeemed}</span></li>
                      <li class="swatch__elem" name="Payment Inprogress">Payment Inprogress <span class="used-space">{this.state.PaymentInProgress}</span></li>
                      <li class="swatch__elem" name="Payment Failed">Payment Failed <span class="used-space">{this.state.PaymentFailed}</span></li>
                      <li class="swatch__elem" name="Settled">Settled <span class="used-space">{this.state.Settled}</span></li>
                      <li class="swatch__elem" name="Expired" style={{paddingrRight: '15px'}}>Expired <span class="used-space">{this.state.Expired}</span></li>

                  </ul>
              </div>
            </div>
        )
    }
}

export default SwatchElement

Teraz, gdy chcę zmienić wartości, przypisałem takie wartości w komponencie nadrzędnym

<div class="row">
              <SwatchElement Submitted={x}/>
              <SwatchElement Submitted={100}/>
          </div>

Wygląda na to, że robi to, co chcę, ale nie wiem, czy to byłby właściwy sposób. Jakieś rady lub sugestie?

0
jfishdiuahk 11 listopad 2019, 23:13

1 odpowiedź

Najlepsza odpowiedź

To podejście:

 this.state = {
            Submitted: this.props.Submitted, // Submitted : this.props.Submitted 
            Redeemed: 50,
            PaymentInProgress: 85,
            PaymentFailed:25,
            Settled:60,
            Expired:10,
 }

Ma jedną wadę, spróbuj zmienić the props.Submitted po komponent, zobaczysz nieruchomy wartość, ponieważ konstruktor komponentu uruchamia raz po utworzeniu komponentu . Stąd komponent jest aktualizowany nie ma miejsca w swoim kodzie, gdzie nowe rekwizyty zostaną skopiowane do stanu.

Jeśli nie przejmujesz się, aby upowszechniały rekwizyty, możesz to w takim razie.

Jeśli dbasz o zaktualizowane rekwizyty, istnieją sposoby, aby to zrobić, ale na ogół jest ona na ogół Zalecany, aby uniknąć stosowania stanu pochodnego. Korzystanie z państwa pochodnego może być trudne, ponieważ musisz zsynchronizować stan z rekwizytami, więc jeden sposób, aby uniknąć kopiowania rekwizytów do stanu (jeśli to możliwe) i użyj rekwizytów bezpośrednio; na przykład Użyj this.props.Submitted Render.

0
gmoniava 11 listopad 2019, 23:38