Как заменить аргументы функции стрелки es6 на пользовательский тип (интерфейс)? - PullRequest
Новая
       8

Как заменить аргументы функции стрелки es6 на пользовательский тип (интерфейс)?

0 голосов
/ 29 апреля 2020

Я создал шаблон деталей в реакции.

Необходимо заменить {детали}: любой пользовательский интерфейс, как показано ниже

{детали}: iDETAILS

Что мне нужно сделать? 


const Details = ({ details }: any) => {

return (

<div>

<h1 className=""> User Details </h1>

<div className="center shadow-3 w-25 ma4 bg-white pa3 bb bw3 b--green">

<h4>ID: {details.empId} </h4>

<h5>Designation: {details.designation} </h5>

<p className="fw6">{`${details.firstName} ${details.lastName} `} </p>

<p> Contact: <span className="fw6"> {details.phone} </span></p>

</div>

<button type="button" className="f6 link dim ph3 fw9 pv2 mb2 dib white bw3 b--green bg-dark-green mt5" onClick={() => handleSave(details)}> Save </button>

</div>

)

}

export default Details;

Ответы [ 3 ]

2 голосов
/ 29 апреля 2020

Вам нужно использовать React.FC для определения типизированных компонентов в реакции. 

interface DetailsInterface{
    empId: any;
    designation: any;
    firstName: any;
    lastName: any;
    phone: any;
}

const Details:React.FC<{details: DetailsInterface}> = ({ details }) => {

    return (

        <div>

            <h1 className=""> User Details </h1>

            <div className="center shadow-3 w-25 ma4 bg-white pa3 bb bw3 b--green">

                <h4>ID: {details.empId} </h4>

                <h5>Designation: {details.designation} </h5>

                <p className="fw6">{`${details.firstName} ${details.lastName} `} </p>

                <p> Contact: <span className="fw6"> {details.phone} </span></p>

            </div>

            <button type="button" className="f6 link dim ph3 fw9 pv2 mb2 dib white bw3 b--green bg-dark-green mt5" onClick={() => handleSave(details)}> Save </button>

        </div>

    )

}
0 голосов
/ 29 апреля 2020 
interface IDetails {
   firstName: string;
   lastName: string;
   ...
}

const Details: React.FunctionComponent<IDetails> = props => {

return (

<div>

<h1 className=""> User Details </h1>

<div className="center shadow-3 w-25 ma4 bg-white pa3 bb bw3 b--green">

<h4>ID: {props.empId} </h4>

<h5>Designation: {props.designation} </h5>

<p className="fw6">{`${props.firstName} ${props.lastName} `} </p>

<p> Contact: <span className="fw6"> {props.phone} </span></p>

</div>

<button type="button" className="f6 link dim ph3 fw9 pv2 mb2 dib white bw3 b--green bg-dark-green mt5" onClick={() => handleSave(details)}> Save </button>

</div>

)

}

export default Details;

Пожалуйста, используйте это для получения дополнительной информации: https://www.typescriptlang.org/docs/handbook/jsx.html

Эта строка: 

const Details: React.FunctionComponent<IDetails> = props => {

Может быть заменена этой строкой с использованием деструктуризации: 

const Details: React.FunctionComponent<IDetails> = ({firstName, lastName})=> {

Я сделал для вас пример: https://codesandbox.io/s/condescending-mendel-k5y7j?file= / src / index.tsx

0 голосов
/ 29 апреля 2020

Вот реализация: 

import React from "react";

interface IDetailsProps {
  details: {
    empId: number;
    designation: string;
    firstName: string;
    lastName: string;
    phone: string;
  };
}

const Details: React.FC<IDetailsProps> = ({ details }) => {
  const handleSave = details => {};
  return (
    <div>
      <h1 className=""> User Details </h1>

      <div className="center shadow-3 w-25 ma4 bg-white pa3 bb bw3 b--green">
        <h4>ID: {details.empId} </h4>

        <h5>Designation: {details.designation} </h5>

        <p className="fw6">{`${details.firstName} ${details.lastName} `} </p>

        <p>
          {" "}
          Contact: <span className="fw6"> {details.phone} </span>
        </p>
      </div>

      <button
        type="button"
        className="f6 link dim ph3 fw9 pv2 mb2 dib white bw3 b--green bg-dark-green mt5"
        onClick={() => handleSave(details)}
      >
        Save
      </button>
    </div>
  );
};

export default Details;

См. Пример здесь:

https://codesandbox.io/s/nostalgic-engelbart-yfkib?file= / src / Details.tsx

...