如何将图像传递给 TypeScript React 组件

Question

我用 TypeScript 编写了一个 React 组件，如下所示：

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>} />
```
这里详细解释一下：<img>: The Image Embed element

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

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) => (
...

Components and Props 是 React 如何传递 props 的一个很好的例子。

编辑

另一种选择是使用 React.FC 如下所示

interface ISingleColumnProps {
  image: string;
  heading: string;
  para: string;
}
const SingleColumn: React.FC<ISingleColumnProps> = ({image, heading, para}) => (
  <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>
);

如何将图像传递给 TypeScript React 组件

How to pass an image to a TypeScript React component

typescript

react-bootstrap