代码之家 › 专栏 › 技术社区 › Knows Not Much

如何将图像传递到typescript react组件

react-bootstrap typescript

Knows Not Much · 技术社区 · 4 年前

我用这样的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'.

1 回复 | 直到 4 年前

Moh-682 4 年前

<img src={<string>} />

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

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 是一个很好的例子反应如何传递道具。

德国劳埃德船级社:)

推荐文章

user3587624 · 禁用FluentUI React组件上的onClick事件

1 年前

Devmix · 如何在new Map()中保存状态?

1 年前

programmerGuy · 使用useState时获取不可分配给参数的接口

1 年前

Luisus · 从Prisma 5客户端提取类型

1 年前

Rostys · TypeScript:使用类型转换进行类型保护

1 年前

Raffaele · TS2304:当types.d.ts导出某些内容时,找不到名称ENDPOINT

1 年前

Anne · 类型不一致的对象的TypeScript类型定义

1 年前

tuimui · 使用react+ts通过道具传递数据

1 年前

FJ97 · 错误NullInjectorError:R3InjectorError(AppModule)[MatDialogConfig->MatDialogConfig]:

1 年前

Pooria Sadeghy · Vitest-类型错误:_ctx$t不是函数

1 年前