derzeit keine Add erforderlich Attribut einer ReactJS Eingabekomponente

Question

ich ein erforderliches Attribut auf einen reagieren Eingabekomponente hinzufügen bin versucht:

export default function UiInput() { 
    render() { 
    return (
    <input 
    {...customAttributes} 
    size={size ? size : null} 
    value={inputValue} 
    maxLength={maxLength} 
    required={required} 
    /> 
    ) 

und wenn ich meine Komponente wie so nenne,

<UiInput 
    required={required} 
    /> 

Ich bekomme das rote Sternchen nicht zum Rendern - es werden keine Fehler angezeigt, wenn ich eine Eingabekomponente übergebe, aber kein rotes Sternchen erscheint, wie kann ich sicherstellen, dass das Sternchen für die erforderlichen Eingaben gerendert wird? Unterstützt ReactJS das nicht?

Answer 1

Denken Sie daran, dass Sie required als prop an UiInput übergeben.

Das Muster Sie für Ihre Komponente ist eine Stateless Functional Component, wenn Sie dies tun:

• props wird als Parameter übergeben durch.
• Sie müssen nicht die render() Methode deklarieren, schreiben Sie einfach Ihre Return-Anweisung.

Sie können Ihre Komponenten wie so erklären:

function UiInput(props) { 
     return (
     <input 
     size={props.size ? props.size : null} 
     required={props.required} 
     /> 
    ) 
    } 

Und machen es wie so:

<UiInput required="required" /> 

Sie ein JSFiddle here sehen können. Bitte beachten Sie, dass ich zum Zweck dieser Demo einige props entfernt habe.

Hier ist die Komponente gerendert, ignorieren Sie bitte das Attribut.