Question

我用这样的打字稿写了一个反应组件

    const SingleColumn = (image: any, heading: string, para: string) => {return(
      <Col className="col-md-4 my-4">
        <img src={image} alt="" className="w-100"/>
        <h4 className="my-4">{heading}</h4>
        <p>{para}</p>
        <a href="#" className="btn btn-outline-dark btn-md">Our Story</a>
      </Col>
    )};

我在我的代码中像这样调用这个组件

    import img from '../img/1.jpg';
    <Row className="row my-5">
      <SingleColumn image={img1} heading="Amazing.Incredible." para="Use the adjective amazing"/>
    </Row>

这段代码有两个问题。

图像参数的类型为 any。什么应该是正确的类型？如何找到正确类型的 HTML 元素。有没有办法查询？
我收到一个编译错误，提示 Tag 'SingleColumn' expects at least '3' arguments, but the JSX factory 'React.createElement' provides at most '2'.

Answer 1

在代码中使用的上下文中，图像的类型应该是字符串。

<img src={<string>} />

这里详细解释一下。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img 2)

您不应该像那样将属性传递给组件。所有属性都应该在一个对象下的一个对象中，通常称为“道具”，就像这样

const SingleColumn = (props: {
  image: string;
  heading: string;
  para: string;
}) => (
  <div className="col-md-4 my-4">
    <Col className="col-md-4 my-4">
      <img src={image} alt="" className="w-100" />
      <h4 className="my-4">{heading}</h4>
      <p>{para}</p>
      <a href="#" className="btn btn-outline-dark btn-md">
        Our Story
      </a>
    </Col>
  </div>
);

或者你可以像这样进行解构

const SingleColumn = ({ image, heading, para }) => (
  <div className="col-md-4 my-4">
    <Col className="col-md-4 my-4">
      <img src={image} alt="" className="w-100" />
...

我强烈建议你制作像

这样的界面


interface ISingleColumnProps {
  image: any;
  heading: string;
  para: string;
}

const SingleColumn = (props: ISingleColumnProps) => (
...

希望有帮助！无论哪种方式，在这里 https://reactjs.org/docs/components-and-props.html 是关于 react 如何传递 props 的一个很好的例子。

GL :)

如何将图像传递给打字稿反应组件

1 个答案: