如何将es6箭头函数参数替换为自定义类型(接口)？

Question

我已经在react中创建了详细信息模板。

需要替换{details}：任何自定义界面，如下所示

{详细信息}：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;

Answer 1

您需要使用React.FC来定义react中的类型化组件。

​

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>

    )

}

​

Answer 2

具体实现如下：

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

Answer 3

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