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

Question

我最近在学习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 />
        </>
    );
}

Answer 1

我不是 React 专家，但我认为你应该创建你的 class 扩展 React.Component，而且我认为你必须用这个调用 return 卡片中的道具。 React 中的一个重要内容应该只是父级使用（您的代码）而不是 <> 。我会让下面的代码。

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

export default class Cards extends React.Component {

    constructor(props) {
    super(props) }

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

ReactDOM.render(
    <div>
    <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"/>
    </div>,
    document.getElementById('root')
);

希望对你有帮助，我也在学习react，我不是之前说的专家，祝你好运！

Answer 2

关注：npx create-react-app project-name

当您打开项目目录时，您会发现： modules 文件夹，public 文件夹，src 文件夹，package-lock.json，package.json 在 src 文件夹中，创建一个名为 components 的文件夹，它收集所有组件，如 Card 组件 Card.js

import React from 'react';
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>
) }
export default Card;

在 App.js 中，这是将 Card 导入应用程序根目录的正确方法

import Card from './components/Card';

function App(){
       return (
            <>
               <Card imgsrc=''your image" />
            </>
)}

您的代码需要分离组件。

Answer 3

您的 Card 组件实际上作为一个独立的 React 应用程序运行。这是因为当您运行整个脚本时，它还会执行 ReactDOM.render 函数，该函数将您的反应元素呈现在 #root 并且在这种情况下，在调用 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 会导致意外结果。

因此，要解决只有一张卡片正在渲染且图像未显示的问题，只需将您在 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" />
        </>
    );
}

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

React props not working for me I am designing a card

javascript

reactjs

react-props