时间戳

首页 > 解决方案 > React 道具对我不起作用 我正在设计一张卡片

javascript - React 道具对我不起作用 我正在设计一张卡片

问题描述

这些天我正在学习 React.js..我正在通过反应设计一张卡片......你可以在下面查看我的代码......请解释我缺少的地方......输出没有显示任何图像，只显示一张卡片输出不是所有的卡......

卡组件：

import React from 'react';
import ReactDOM from 'react-dom';

function Card(props){
    return(
        <>
    <div className="main">
        <div className="img1">
            <img src={props.imgsrc} alt="card image"/>
            <div className="title">
                <h3>{props.title}</h3>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat, repellat.</p>
                <button>watch now</button>
            </div>
          </div>
    </div>
    </>
    )
}

ReactDOM.render(
    <>
    <Card  imgsrc="https://source.unsplash.com/random/200x200" title="First Image"/>
    <Card imgsrc="https://source.unsplash.com/random/200x200" title="Second Image"/>
    <Card imgsrc="https://wallpapercave.com/wp/wp6672547.jpg" title="Third Image"/>
    </>,
    document.getElementById('root')
);

export default Card;

应用组件：

import Card from "./Card"
// other imports

function App() {
    return (
        <>
            <Heading />
            <Imgs />
            <Tme />
            <Calc />
            <hr></hr>
            <Card />
        </>
    );
}

标签： javascriptreactjsreact-props

解决方案

你的Card组件实际上是一个独立的 react 应用程序。这是因为当您运行整个脚本时，它还会执行在这种情况下ReactDOM.render渲染您的反应元素的函数，#root在调用之前还没有渲染任何 React 元素ReactDOM.render。

function Card(props){
    return(
        <React.Fragment>
          <div className="main">
              <div className="img1">
                <img src={props.imgsrc} alt="card image"/>
                <div className="title">
                    <h3>{props.title}</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat, repellat.</p>
                    <button>watch now</button>
                </div>
              </div>
          </div>
        </React.Fragment>
    )
}

ReactDOM.render(
    <React.Fragment>
      <Card  imgsrc="https://source.unsplash.com/random/200x200" title="First Image"/>
      <Card imgsrc="https://source.unsplash.com/random/200x200" title="Second Image"/>
      <Card imgsrc="https://wallpapercave.com/wp/wp6672547.jpg" title="Third Image"/>
    </React.Fragment>,
    document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

当您导入时它不起作用Card，App因为 React 元素可能已经在那里呈现（例如，父组件App），因此再次调用ReactDOM.render同一个 html 元素#root将导致意外结果。

因此，要解决仅 1 张卡正在渲染且图像未显示的问题，只需将您在其中所做的内容复制ReactDOM.render到App正在返回的内容中即可

// essential imports here

function App() {
    return (
        <>
            <Heading />
            <Imgs />
            <Tme />
            <Calc />
            <hr>
            </hr>
            <Card imgsrc="https://source.unsplash.com/random/200x200" title="First Image" />
            <Card imgsrc="https://source.unsplash.com/random/200x200" title="Second Image" />
            <Card imgsrc="https://wallpapercave.com/wp/wp6672547.jpg" title="Third Image" />
        </>
    );
}

推荐阅读