Biorąc pod uwagę prosty komponent, który renderuje jego dzieci:
class ContainerComponent extends Component {
static propTypes = {
children: PropTypes.object.isRequired,
}
render() {
return (
<div>
{this.props.children}
</div>
);
}
}
export default ContainerComponent;
Pytanie: Jaki powinien być typ prop dla dzieci?
Gdy ustawię go jako obiekt, nie powiedzie się, gdy użyję komponentu z wieloma elementami potomnymi:
<ContainerComponent>
<div>1</div>
<div>2</div>
</ContainerComponent>
Ostrzeżenie: Niepowodzenie typu podpory: Nieprawidłowy
children
typ podporyarray
dostarczony doContainerComponent
, oczekiwanyobject
.
Jeśli ustawię go jako tablicę, zakończy się niepowodzeniem, jeśli dam mu tylko jedno dziecko, tj .:
<ContainerComponent>
<div>1</div>
</ContainerComponent>
Ostrzeżenie: Niepowodzenie typu rekwizytu: Niepoprawne obiekty potomne rekwizytów typu obiektu dostarczone do obiektu ContainerComponent, oczekiwana tablica.
Radzę, czy powinienem po prostu nie zawracać sobie głowy sprawdzaniem propTypes elementów potomnych?
reactjs
jsx
react-proptypes
d3ming
źródło
źródło
node
Odpowiedzi:
Spróbuj czegoś takiego przy użyciu
oneOfType
lubPropTypes.node
lub
źródło
children
typuobject
... oczekiwana tablica”.children: PropTypes.node
, że zadziałało w obu przypadkach. Dzięki za sugestie =)React.PropTypes.node
opisuje dowolny obiekt do renderowania.PropTypes.node
. To obsługuje następujące poprawki: nic, ciąg, pojedynczy element, kilka elementów, fragment, komponent.Dla mnie to zależy od komponentu. Jeśli wiesz, czego potrzebujesz, aby go wypełnić, powinieneś spróbować określić wyłącznie lub wiele typów, używając:
Jednak głównie uważam, że z bardziej ogólnymi komponentami, które mogą mieć wiele rodzajów dzieci, chętnie używam:
Jeśli chcesz odwołać się do komponentu React, będziesz szukał
Mimo że,
opisuje wszystko, co można renderować - ciągi, liczby, elementy lub tablicę tych rzeczy. Jeśli ci to odpowiada, to właśnie tak.
źródło
Proptypes.any
jest zbyt powszechnym typem. Eslint nie jest z tego zadowolony.Dokumentacja PropTypes zawiera następujące elementy
Możesz więc użyć
PropTypes.node
do sprawdzenia obiektów lub tablic obiektówźródło
Odpowiedzi tutaj wydają się nie obejmować dokładnie sprawdzania dzieci.
node
iobject
są zbyt pobłażliwi, chciałem sprawdzić dokładny element. Oto, co wykorzystałem:oneOfType([])
aby zezwolić na jedno lub szereg dziecishape
iarrayOf(shape({}))
na tablicy pojedyncze i dzieci, odpowiedniooneOf
dla samego elementu potomnegoNa koniec coś takiego:
Ten problem pomógł mi to lepiej zrozumieć: https://github.com/facebook/react/issues/2979
źródło
Jeśli chcesz dokładnie dopasować typ komponentu, zaznacz to
Jeśli chcesz dokładnie dopasować niektóre typy komponentów, zaznacz to
źródło
Wypróbuj niestandardowe typy:
Skrzypce
Pokaż fragment kodu
źródło
Przykład:
Zdjęcie: pokazuje błąd w konsoli, jeśli oczekiwany typ jest inny
źródło