如何将react js卡片分开？
将React.js卡片分开可以通过以下几种方式实现：
- 使用组件化：在React.js中，可以将卡片拆分为多个组件，每个组件负责渲染不同的卡片内容。这样可以提高代码的可维护性和复用性。可以使用React的组件化开发方式，将卡片的不同部分拆分为独立的组件，然后在父组件中将这些组件组合起来，形成完整的卡片。
- 使用条件渲染：根据不同的条件，渲染不同的卡片内容。可以使用React的条件渲染功能，根据不同的条件判断，渲染不同的卡片内容。例如，可以使用if语句或三元表达式来判断是否显示某个卡片内容。
- 使用路由：如果需要在不同的页面或路由下显示不同的卡片内容，可以使用React的路由功能。可以根据不同的路由路径，渲染不同的卡片内容。可以使用React Router等第三方库来实现路由功能。
- 使用状态管理：如果需要在不同的状态下显示不同的卡片内容，可以使用React的状态管理功能。可以定义一个状态变量，根据不同的状态值，渲染不同的卡片内容。可以使用React的useState或Redux等状态管理库来实现状态管理。
以上是将React.js卡片分开的几种常见方式。具体选择哪种方式取决于具体的需求和场景。腾讯云提供了云服务器、云函数、云数据库等一系列云计算产品，可以根据具体需求选择相应的产品进行开发和部署。
相关·内容
1回答
过去几周，我用Gatsby和Prismic更深入地研究了react.js。我已经创建了博客卡片，我使用flex: wrap (查看图片)显示这些卡片，现在我想水平显示我的博客卡片。 ? 如果我现在说唱： ? 我的代码： Cardlist.js： <React.Fragment>
<div className="cardslist">{children}</div>
{/* --- STYLES --- */}
<style jsx>{`
.cardslist {
text-ali
浏览 14提问于2019-09-14得票数 0
1回答
与Django的连接
、、、、
有一个已构建的具有以下文件结构的React项目：或：
dist
| assets
| | css
| | | appPage.blablabla.css
| | img
| | | mainPanel
| | | palettePanel
| | | structuralPanel
| | | workingSpace
| js
| | appPage.blablabla.js
| app.html
app.html -主html文件
带有js文件的文件夹
资产-带有一些静态文件文件夹的文件夹
我如何将它包含到我的django应用程序中？
浏览 1提问于2022-01-05得票数 0
我正在使用slate.js和React.js创建一个基本的编辑器。
当我点击编辑器外的卡片时，我想在编辑器内的当前选定位置插入文本，即当我点击包含文本的卡片时，文本上的卡片应插入slate.js编辑器中的最后一个光标位置。
浏览 43提问于2019-04-02得票数 4
2回答
我现在正在学习React Router，我想知道是否有可能将Topics.js渲染到一个新组件中，并在单击时删除顶部的链接。 例如，假设我想要卡片而不是链接，当我单击卡片时，我希望链接消失并出现在新页面上，这样页面上就只会出现组件Topic.js https://stackblitz.com/edit/react-router-dynamic-routes?file=index.js
浏览 25提问于2019-05-15得票数 1
我有一张显示电影/电视节目的卡片清单。我需要的是当我点击一张卡片时，它会将我重定向到一个新的页面(详细信息页面)，在那里我可以看到特定电影/卡片的详细信息。
我的card.js和卡片收集.js是：
卡片：
import React from 'react';
import './card.styles.css';
const Card = ({ item }) => (
<div className='card-container'>
<div
className='image'
浏览 0提问于2020-09-18得票数 1
我正在使用react路由器将主页上的一组卡片定向到其他单独的页面。但是，当我单击一张卡片时，新页面呈现在一组卡片下面，而我想要的是只呈现新页面。我认为这个问题可能与我的App.js保存它的主页有关，但是我不知道我应该把它放在哪里，是否应该有一个单独的链接，等等？我很感激你的帮助！谢谢
下面是App.js的代码
import React from 'react';
import Routes from '../containers/routes.js';
import ProjectCards from '../containers/project_car
浏览 2提问于2017-12-21得票数 1
回答已采纳
我正在尝试为组件设置style，但是我不知道如何用React编写正确的语法。我的CSS如下所示： .cell {
border: 1px solid rgba(0, 0, 0, 0.05);
} 下面是我的render()方法： render() {
let styles = {
...
//border: 1px solid rgba(0, 0, 0, 0.05), <---- Not correct
};
return (
<div className="cell" style={sty
浏览 198提问于2020-04-25得票数 3
回答已采纳
我是新来的，
我正试着从一排排卡片中得到一张卡的标识。我不知道该怎么做。
我的代码看起来是这样的。
card.js
import React from "react";
const cardDetailsClick = (ID) => {
console.log("card id is " + ID);
};
const Card = ({ title, id }) => {
return (
<div className="card">
<div clas
浏览 5提问于2021-09-26得票数 0
回答已采纳
1回答
我已经把我的React.js应用程序转换成Next.js，现在我想路由到我的博客详细信息页面，点击博客页面上的卡片，我从heroku获取数据。在react中，我正在使用react路由器-dom，如何在next.js中这样做？
浏览 7提问于2022-05-16得票数 -2
1回答
布局:创建响应性3卡布局
、、、、
我试图实现一个布局，一张大卡片被2张小卡片包围在同一列，但是对于中小型屏幕来说，它是2列，一个是大卡片，另一个是只包含2张卡片。
我不知道如何构造我的代码以实现这一点。有人能帮上忙吗？
下面是我的代码的一个片段
.container{
display: flex;
gap: 8px;
}
.small-card {
width: 200px;
height: 200px;
background-color: red;
}
.big-card {
height: 200px;
flex-grow: 1;
background-color: yellow
浏览 6提问于2022-01-24得票数 0
回答已采纳
我在我的react js项目中使用了bootstrap。我正在使用css网格显示一些卡片，但它没有响应。
import React from "react";
import "./Project.css";
export const Project = () => {
return (
<div>
<div className="container tracked">
<div className="card">
<
浏览 0提问于2019-07-22得票数 1
我有一个对象数组，对于每个对象，我都将其.map为一个名为Card.js的组件。每一张卡片都有一个“编辑”按钮，我有一个编辑表单，我只想显示在我点击按钮的卡片上。
目前，无论我如何将id传递给Editform.js组件，它仍然会使所有卡片组件的表单出现。
下面是我调用的当前组件，它只为单击按钮呈现表单。我传入“pass”数组中的所有卡片，并且我认为是调用函数中当前.map对象的id：
function Editform({ cards, setCards, id }) {
const thisCard = cards.filter((card) => card.id === id)[
浏览 3提问于2022-10-30得票数 -1
尝试使用React和React Hooks构建一个闪存卡应用程序时，我可以渲染我的主屏幕。在介绍Router时，我可以单击链接，将路径更新为我要查找的路径，但新页面中没有呈现任何内容。 App.js import React, {useState, useEffect} from "react";
import Header from "./Header";
import NotFound from "./NotFound";
import ShowAllDecks from './ShowAllDecks';
import a
浏览 12提问于2021-02-08得票数 2
回答已采纳
在我的React应用程序中，一个页面上有三张卡片。我已经很好地将标题和文本内容映射到卡片上了，但我想不出如何将背景图像映射到卡片上。使用planet对象，我如何使每张卡的背景成为导入的图像？
import React, { Component } from "react";
import { Link } from "react-router-dom";
import mars from "../images/mars.jpg";
import venus from "../images/venus.jpg";
import ti
浏览 1提问于2019-12-01得票数 0
2回答
所以我对电子和反应的研究还是新手。我想实现更多的功能，但遇到了一个问题，当我将函数c传递到一个新的Card元素时，它似乎在创建时传递函数c中的钩子。
这样:当单击+按钮3次时，它将按预期呈现3张卡片，让我们调用它们0、1和2。然而，当单击他们的日志按钮来记录卡片钩子时，单击0的日志按钮控制台日志：
{}
单击1的日志按钮控制台日志：
{0: {react element of 0}}
单击2的日志按钮控制台日志：
{0: {react element of 0}, 1: {react element of 1}}
但是，单击我在App.js中安装的用于排除此问题的-按钮会产生以下结果：
{0:
浏览 3提问于2021-10-09得票数 2
回答已采纳
我正试着在空格键上翻张卡片。它只翻转一次，但不会倒转。我正在通过一个真实的，假的useState和JS按键事件处理程序翻转卡片。下面我有一个示例，它在我的原始代码中没有使用所有其他术语的情况下重新创建相同的问题。当我按下预期的空格后，它将从false改为"true“。然而，它不会掉头。
我应该换个方式吗？你会怎么做？
import React from "react";
import { useEffect, useState } from "react";
export const Test = () => {
浏览 4提问于2022-04-16得票数 1
回答已采纳
ContentWithFooter有Card的列表。每个Card都有一个菜单来标记或删除卡片(文章)。当点击icon时，我只想插入那张卡片的菜单(<DeleteFlagPost/>)，而不是所有的卡片。另外，插入菜单后，当点击菜单以外的菜单时，请从菜单组件中删除它。我知道这是一个很长的列表，但你的帮助将帮助我理解更多。谢谢。
ContentWithFooter.js：
class ContentWithFooter extends React.Component {
render() {
return(
<div>
浏览 1提问于2016-07-02得票数 1
我正在学习React。我不明白为什么我们要在App.js的根组件中定义状态。İf我有一个卡片组件，而我只有一个与卡片组件相关的状态，我应该在根组件还是卡片组件中定义它？你能帮我理解这个逻辑吗？
谢谢你的回答
浏览 3提问于2021-02-10得票数 0
2回答
如何将组件的结果呈现为卡片
、、、、
很难从返回json数据，以便将时间、哈希和高度数据显示为卡片
我尝试过显示从获取的Json数据，它工作正常，并且所有内容都以卡片的形式显示
来自list.js
import React from 'react'
const List = ({ list }) => {
return (
<div>
<center><h1>Blockchain List</h1></center>
{list.map((list) => (
浏览 12提问于2019-10-23得票数 1
2回答
我想得到一个类似pinterest的布局，但我做不到，
这是卡片的div：
<div className='border-[1px] border-blanc rounded-[18px] w-[25rem] h-fit justify-between hover:bg-gray-400/5 cursor-pointer '>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></scri
浏览 4提问于2022-05-03得票数 0
回答已采纳
我正在开发最新版本的React-native。我找不到任何文档来使用SquareUp的application_id和location_id来获取卡片随机数。请建议我如何将此支付方法与React-Native应用程序集成。
另外，建议我的包对此最有效。
浏览 0提问于2019-12-04得票数 1
我有一个购物车，它使用map根据数组对象呈现几张卡片。每张卡片都包含商品价格，点击按钮可以增加的项目数量，以及项目总价=价格*数量。底部有一个信息栏，当用户点击add按钮时，我想显示所有卡的总价。下面是一个有用的示例：
以下是代码：
Home.js：
import React, {useState} from 'react';
import Card from './Card';
import Infobar from './Infobar';
const Home = () => {
const dummyData = [
浏览 2提问于2020-09-17得票数 0
回答已采纳
我正在尝试使用borderRadius属性10在React Native中设置自定义卡片组件的阴影。
代码如下：
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
shadowOffset: {
width: 0,
height: 3,
},
elevation: 3,
如何将圆角应用于阴影？
浏览 8提问于2020-05-31得票数 0
回答已采纳
无法使用react渲染卡片，则返回错误。
"transpiled.js:35999 Uncaught :无法读取未定义“的属性'prepareStyles‘
浏览 4提问于2017-09-07得票数 0
1回答
我一直在尝试打印卡片内部数组的值，但是由于某种原因，for循环不允许我打印卡片
import React, { Component } from 'react';
import * as bs from 'react-bootstrap'
import '@fortawesome/fontawesome-free/css/all.css'
import PRODUCTS from './products'
import ProductCard from './product-card'
function Cen
浏览 0提问于2020-02-07得票数 0
我在我的项目中使用react-router v4.2.2，并试图创建一组卡，每个卡都链接到其他组件。现在我只是测试路由器的工作，通过路由每个卡到一个名为'Project1‘的特定组件。但是，这并不起作用；我没有看到Project1组件中的div弹出。我做错了什么？？每个卡片不应该链接到Project1组件吗？
下面是保存卡片的主容器的代码：
import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom
浏览 16提问于2017-12-22得票数 1
我想创建一个嵌套的模式，当我打开第一个模式，他们将是一个不同的卡片，当我点击卡片时，我想打开第二个模式，并删除蚂蚁设计中的第一个模式。我正在使用react js。 请帮帮我
浏览 16提问于2021-06-30得票数 0
5回答
同时处理两个API
、、、
我希望使用React从API中加载行星数据，并将这些数据放入一个重要的UI卡组件中。不幸的是，我使用的行星API没有照片，我也想在卡片中显示这些照片。为此，我使用了另一个API。
获取行星数据的API：
获取行星图像的API：
我已经想出了如何将每个行星组件及其各自的信息绘制成一张卡片，但不知道如何将NASA的每幅图像映射到相应的行星上：
这是App.js组件的代码：
import React, {useState, useEffect} from 'react';
import './App.css';
import axios from 'axios
浏览 3提问于2020-09-24得票数 2
回答已采纳
1回答
我对React.js非常陌生，如果我有一组图像，其中有3张卡片，在卡片上有三行显示，每行之间有空格。我想知道如何使用下面的卡片引导程序代码来迭代图像，
function App() {
return (
<Card style={ { width: "18rem" } }>
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<
浏览 16提问于2020-02-26得票数 0
我正在使用react-toolbox和react-toolbox- in依赖来集成reactjs中的材料设计。在使用卡片组件时，我想自定义标题和副标题的css，它们是标签的属性。如何在卡片的副标题和标题中添加css？
我的组件看起来像这样。
import React, { Component } from 'react';
import {Display} from './Display.js';
import './toolbox/theme.css';
import theme from './toolbox/theme'
i
浏览 1提问于2017-08-29得票数 0
我试图在每一张卡片中添加一个删除按钮来修改状态。我应该在卡片文件或概述文件中添加按钮(下面的代码)？我的猜测是将它添加到Card文件中，但这样我就不能再访问概述文件中的状态了？
import React, { PureComponent } from 'react'
import {movies} from "./movies.js"
import Card from "./Card.js"
import "./Home.css"
class Home extends PureComponent {
construct
浏览 4提问于2020-05-18得票数 0
2回答
在我的项目中，我有两个简单的组件--相册和卡片--当我尝试在app.js中呈现卡片组件时，页面永远不会加载，这会给我一个错误，即页面变得没有响应能力，当我评论卡片时，页面加载得很好，到目前为止，我还没有做任何大的事情，我只是创建了一个导航条，并且希望在其中有一个卡片。
我的app.js
import Album from './components/Album';
// import Card from './components/Card';
import './App.css';
function App() {
return (
浏览 7提问于2021-12-25得票数 1
回答已采纳
2回答
我想在我的新web应用程序中使用React作为前端，Express用于后端。
根据指南，我必须在我的项目目录中使用工具创建子项目：
my-project
|-frontend
| |-package.json
| |-components
| | |-...
| |
| |-...
|
|-backend
| |-api
| | |-...
| |-app.js
| |-...
|
|-package.json
在开发过程中，我应该在不同的端口上启动两个服务器，用于后端和前端，以及代理请求向后端抛出React服务器。
在我看来，这个计划很难看。如何将后端服务器配置为提供与react脚本相同的
浏览 1提问于2017-12-04得票数 2
2回答
我试图使卡片可点击和扩展，但当更新状态时，它发生在所有的卡片上。我只想在一张卡中进行状态更改(在本例中，事件发生的那张卡上是单击事件)。但是，每隔一张卡就会更新一次状态。目前，这在一个项目上有效，但也需要在其他项目上有效。
export default class TransactionCards extends React.Component {
constructor(props) {
super(props);
this.state = {
isHidden: true
};
}
toggleHidden() {
this.setStat
浏览 1提问于2019-04-18得票数 0
创建了用于显示问题的codesandbox：https://codesandbox.io/s/agitated-https-2xjs2?fontsize=14&hidenavigation=1&theme=dark 当我将鼠标悬停在卡片上时，我想要一个工具提示来显示。我需要从OverlayTrigger向工具提示组件传递一个值。使用以下代码，将鼠标悬停在卡片上时不会显示任何内容： Character.js： import React from 'react'
import { Card, OverlayTrigger } from 'react-boo
浏览 19提问于2020-11-08得票数 0
3回答
这些天我正在学习React.js .我正在设计一张react...you可以查看我的代码below...please解释我丢失的地方的卡片.输出不显示任何图像，只显示一张卡片输出，而不是所有卡片……
卡组件：
import React from 'react';
import ReactDOM from 'react-dom';
function Card(props){
return(
<>
<div className="main">
<div className
浏览 7提问于2020-08-15得票数 0
回答已采纳
1回答
我正在ReactJS中开发一个单页应用程序(SPA)，我想知道如何将登录页放在一个单独的页面中。
我使用create-react-app作为我的应用程序的基础，我目前正在App.js文件中为我的SPA定义模板，以及在一个不同的.js文件中的每个组件：Page1.js、Page2.js等等。我使用react-router-dom (V ^4.2.2)来路由我的应用程序。
我的App.js文件：
//node_modules (using ES6 modules)
import React, { Component } from 'react';
import { BrowserR
浏览 3提问于2017-12-13得票数 13
回答已采纳
我试着用反应带创造一副牌。我希望卡片是水平对齐的，但是卡片是垂直对齐的。谁能告诉我怎么做到这一点吗？谢谢
，这是的两个组件
import React, { Component } from "react";
import {
Card,
CardImg,
CardText,
CardBody,
CardTitle,
CardSubtitle,
Button,
Col
} from "reactstrap";`
class MovieItem extends Component {
render() {
return (
<Card>
&
浏览 0提问于2018-10-05得票数 1
1回答
服务器端和前端的电子构建问题
、、、、
我有一个电子应用程序有文件夹结构-
Public -> index.html，main.js
服务器-> server.js
src -> (所有前端应用程序样式和组件)
服务器在localhost:3001上运行，并侦听来自前端的Post和Get命令，这些命令向本地主机提交请求:3001/exampleReq
这是根目录的package.json
{
"name": "test",
"version": "1.0.0",
"private": true,
"prox
浏览 2提问于2021-09-25得票数 0
晚上好,
作为一个学习项目，我想建立一个简单的“学习卡”应用程序。结构非常简单:你有带问题的卡片。单击按钮后，您可以显示正确的解决方案。您也可以单击“问题已解决”，将学习卡片移到被免除的卡片上。
我正在努力实现“将学习卡片转移到被免除的卡片”这一部分。我有一个“问题”数组。在"onSolvedClick“之后，已解决的卡片被复制到”已解决“数组，该数组被设置为新的已解决状态。
当我点击"Frage gelöst“(已解决问题)按钮时，一个新的卡片出现在已解决问题区域。问题是:新的卡片是空的(没有问题/答案)。如果有人能在这一点上帮助我，那就太好了！我今天已经在这个问题上花了几个
浏览 19提问于2019-11-30得票数 2
2回答
我在react js中开发了卡片，这些卡片是基于API数据自动生成的，但是所有的卡片都显示在另一个卡片的下方，我想以行的方式设计那张卡片。我尝试了许多方法，以排的方式设计该卡，但它没有完成。我尝试内联CSS，一些react-bootstrap类。所以请给我一些关于如何设计这张卡片的建议。
class App extends React.Component {
elements = [];
state = {
data:[ null ]
};
getBikes = () => {
try {
return axios.get('URL')
浏览 19提问于2020-02-25得票数 0
回答已采纳
我想改变我的页面标题，但它没有改变，那么这里有什么问题，我找不到它的xD。首先，我导入了我的cards.js并在这里创建了卡片，所有的卡片都在工作，而不是只是更改了标题的一部分。 import React from 'react';
import Cards from './Components/Cards/Cards'
class App extends React.Component {
state = {
cards: [
{ name: 'Jack', photo: 'cool
浏览 20提问于2020-06-20得票数 0
回答已采纳
1回答
我是新的反应本地人，并试图找出如何分裂一个卡片元素。其他的一切都如预期的一样--单张卡中的每一项都是可点击的，但我想把这两项分开，分成两张可点击的卡片。
电流结果
ItemComponent.js
import React, { Component } from 'react';
import { View, Text, SafeAreaView, TouchableOpacity, ScrollView, StyleSheet } from "react-native";
import PropTypes from 'prop-types&#
浏览 1提问于2020-01-14得票数 1
回答已采纳
演示我的问题的视频：
我有一个简单的应用程序，您可以添加卡到两个不同的行。当一张卡片被添加到一行时，我使用react-transition-group来触发一个"enter“动画。
但是，我还安装了react-beautiful-dnd，以便在行之间启用拖放卡，并重新排序行本身。但是当一张卡片被移动到一个新的行，或者当行被重新排序时，一些卡片有他们的“进入”动画火，这看起来很奇怪，不应该发生。
拖动时，不需要的动画将在
A卡被拖到不同的行。A行被重新排序，2行有不同的卡号。
奇怪的是，当不想要的动画发生时，不是
A卡被拖到原行中的一个新位置。，行被重新排序，行有相同数量的卡片。
我想知
浏览 0提问于2020-02-23得票数 9
回答已采纳
我正在尝试使用React Router 4.2.2，以便每当我单击一个“卡片”组件时加载一个名为PostFocus的组件，并在它周围环绕一个链接。当我点击一个“卡片”时，路径会正确地改变，但是PostFocus组件不会被渲染。我是不是做错了什么或者在路由中遗漏了什么？我想不出来。
代码如下：
class PostsList extends React.Component {
render() {
var createCards = this.props.posts.map((post, i) => {
return (
浏览 2提问于2017-12-11得票数 0
1回答
我正在使用Next.js应用程序，它有一个阅读更多链接的卡片组件。当用户单击阅读更多链接时，卡片应该展开，我使用了"react-show- more“https://github.com/One-com/react-show-more。我需要添加平滑扩展到卡时，按下阅读更多链接与CSS过渡规则，但CSS过渡不工作。这是我的卡片组件。你可以在这里找到现场演示：https://codesandbox.io/s/confident-http-cfz7p?fontsize=14 return (
<CardOuter>
<CardIcon>
浏览 22提问于2019-06-05得票数 0
当我使用require(‘socket.io - socket.io’)包含客户端时，它会说找不到它，那么如果我只在下面一行上尝试socket.io：
var clientSource = read(require.resolve('socket.io-client/socket.io.js'), 'utf-8');
on 'resolve(‘I get the error：'undefined is not a function’
我的package.json：
{
"version": "0.0.1",
浏览 1提问于2015-04-29得票数 1
1回答
我正在学习react js。我无法调用app.js中卡片组件内部的countrypicker组件。有人能帮帮我吗？ 这是我的cards.js import React from 'react';
import './Cards.css';
const Cards = () => {
return(
<div class="Cards">
<p>Cards</p>
</div>
);
}
export defau
浏览 9提问于2021-06-15得票数 0
回答已采纳
我想为每个鸟从API获得一个自己的响应，但不幸的是，b2用b1 /第一个鸟替换了第一次运行的卡片。我希望能够在网站上看到b1和b2的响应。就像现在一样，b2取代了来自b1的所有卡片。
我的代码：
App.js
import './App.css';
import { useEffect, useState } from 'react';
import MyContainer from './MyContainer';
function App() {
const [a, seta] = useState(null)
const [
浏览 10提问于2022-07-06得票数 0
回答已采纳
1回答
我正在尝试使用"Rick and Morty API“构建一个应用程序
我想要做的是：
1)使用REST API渲染网页中的角色名称
2)不知何故，我设法做到了，但我太困惑了。
3)我有两个组件，一个是" card.js“，它创建一个卡片，另一个是"cardlist.js”，它循环遍历card.js组件，使用map函数呈现所有名称。
我的Card.js组件：
import React from "react";
class Card extends React.Component {
state = {
id: "",
浏览 6提问于2019-11-03得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
