0

У меня есть компонент, в который я передаю два компонента с иконкой, label и input, затем, когда я буду вызывать компонент InputComp в другом месте, я хочу видеть input с двумя разными иконками.

Как это сделать правильно?

export default function InputComp() {
  return (
    <div>
    <Label htmlFor="Password">
      <Icon glyph={glyph} viewBox={viewBox}/>
      <Input name="Password" placeholder="Your Password" type="password" />
      <Icon glyph={glyph} viewBox={viewBox} />
    </Label>
  </div>

  );
}
2
  • Передавать в InputComp иконки, не ?
    – user355286
    3 янв 2020 в 20:54
  • это будет переиспользуемый компонент
    – quires
    4 янв 2020 в 20:15

1 ответ 1

1

А что мешает их пропсами в InputCompglyph1 передавать?

<InputComp glyph1={glyph1} glyph2={glyph2}/>

И потом использовать:

export default function InputComp() {
  return (
    <div>
    <Label htmlFor="Password">
      <Icon glyph={this.props.glyph1} viewBox={viewBox}/>
      <Input name="Password" placeholder="Your Password" type="password" />
      <Icon glyph={this.props.glyph2} viewBox={viewBox} />
    </Label>
  </div>

  );
}

Ну или массивом:

<InputComp glyphs={glyphsArray}/>

И потом использовать:

export default function InputComp() {
  return (
    <div>
    <Label htmlFor="Password">
      <Icon glyph={this.props.glyphs[0]} viewBox={viewBox}/>
      <Input name="Password" placeholder="Your Password" type="password" />
      <Icon glyph={this.props.glyphs[1]} viewBox={viewBox} />
    </Label>
  </div>

  );
}
0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.