【发布时间】：2020-05-27 10:05:42
【问题描述】：
我对 React 比较陌生，并尝试渲染一组看起来像这样的 JSX 片段。
<>
<div className="tourCard" key={address.name}>
<h3 className="tourCard__header">{address.name}</h3>
<div className="tourCard__capacity">Capacity: {foundUser.capacity}</div>
{foundUserAddress}
{foundUserAddress2}
<section className="tourCard__cityStateZip">
<div className="tourCard__city">{foundUser.city}</div>
<div className="tourCard__state">{foundUser.state}</div>
{foundUserZip}
</section>
<h5 className="tourCard__blurbHeader">About Us</h5>
{foundUserBlurb}
{socialMediaButtonClicked ? (
<>
{foundUserSocialMedia}
</>
) : (
<>
<button onClick={() => {
socialMediaButtonClicked = true
}}>Social media</button>
</>
)}
</div>
</>
我将它们完全按上述方式推送到一个数组中，并且我正在努力在下面的 return 语句中使用正确的格式来让它们呈现。
我试过了
return (
<>
<section className="tourSection">
{tourCards}
</section>
</>
)
和
return (
<>
<section className="tourSection">
{tourcards.map(tourCard => {
return(
{tourCard}
)
}
</section>
</>
)
但两者都没有成功。我哪里错了？
下面的完整页面代码：
import React, {useContext, useState} from "react"
import { withGoogleMap, GoogleMap, Marker, InfoWindow } from 'react-google-maps'
import { AddressContext } from "../addresses/AddressProvider"
import { UserContext } from "../user/UserProvider"
import { render } from '@testing-library/react'
export default (props) => {
const { addresses } = useContext(AddressContext)
const { users } = useContext(UserContext)
let tourCards = []
const PlanMap = withGoogleMap(props => (
<GoogleMap google={window.google} defaultCenter = { { lat: 39.5, lng: -98.35 } }
defaultZoom = { 4 }>
{
addresses.map(address =>
<>
<Marker
key={address.id}
position={{
lat: address.address.lat,
lng: address.address.lng
}}
label={{
text: "Hello World!",
fontFamily: "Arial",
fontSize: "14px",
}}
>
<InfoWindow
key={address.id}>
<>
<span>{address.name}</span>
<div>
<button onClick={() => {
let foundUser = users.find(user => user.name === address.name)
let foundUserAddress = ""
if (foundUser.hasOwnProperty("address") && foundUser.hasOwnProperty("addressPublic") && foundUser.addressPublic === true) {
foundUserAddress = <>
<div className="tourCard__address">{foundUser.address}</div>
</>
}
let foundUserAddress2 = ""
if (foundUser.hasOwnProperty("address2") && foundUser.hasOwnProperty("address2Public") && foundUser.address2Public === true) {
foundUserAddress2 = <>
<div className="tourCard__address2">{foundUser.address2}</div>
</>
}
let foundUserZip = ""
if (foundUser.hasOwnProperty("zip") && foundUser.hasOwnProperty("zipPublic") && foundUser.zipPublic === true) {
foundUserZip = <>
<div className="tourCard__zip">{foundUser.zip}</div>
</>
}
let foundUserBlurb = ""
if (foundUser.hasOwnProperty("blurb") && foundUser.hasOwnProperty("blurbPublic") && foundUser.blurbPublic === true) {
foundUserBlurb = <>
<div className="tourCard__blurb">{foundUser.blurb}</div>
</>
}
let socialMediaButtonClicked = false
let foundUserWebsite = ""
let foundUserFacebook = ""
let foundUserInstagram = ""
let foundUserTwitter = ""
let foundUserSocialMedia = <>
<section className>
{foundUserWebsite}
{foundUserFacebook}
{foundUserInstagram}
{foundUserTwitter}
</section>
</>
if (foundUser.webPublic === true) {
if (foundUser.hasOwnProperty("website")) {
foundUserWebsite = <>
<div className="tourCard__website">{foundUser.website}</div>
</>
}
if (foundUser.hasOwnProperty("facebook")) {
foundUserFacebook = <>
<div className="tourCard__facebook">{foundUser.facebook}</div>
</>
}
if (foundUser.hasOwnProperty("instagram")) {
foundUserInstagram = <>
<div className="tourCard__instagram">{foundUser.instagram}</div>
</>
}
if (foundUser.hasOwnProperty("twitter")) {
foundUserInstagram = <>
<div className="tourCard__twitter">{foundUser.twitter}</div>
</>
}
}
tourCards.push(
<div className="tourCard" key={address.name}>
<h3 className="tourCard__header">{address.name}</h3>
<div className="tourCard__capacity">Capacity: {foundUser.capacity}</div>
{foundUserAddress}
{foundUserAddress2}
<section className="tourCard__cityStateZip">
<div className="tourCard__city">{foundUser.city}</div>
<div className="tourCard__state">{foundUser.state}</div>
{foundUserZip}
</section>
<h5 className="tourCard__blurbHeader">About Us</h5>
{foundUserBlurb}
{socialMediaButtonClicked ? (
<>
{foundUserSocialMedia}
</>
) : (
<>
<button onClick={() => {
socialMediaButtonClicked = true
}}>Social media</button>
</>
)}
</div>
)
console.log(tourCards)
debugger
}}
>
Add to tour
</button>
</div>
</>
</InfoWindow>
</Marker>
</>
)
}
</GoogleMap>
));
return (
<>
<div>
<PlanMap
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `400px`, width: `400px` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
</div>
<section className="tourSection">
{tourCards}
</section>
</>
)
}
【问题讨论】：
-
有什么东西被渲染了吗？我只是在这里猜测，但我似乎记得你不能将 onClick 函数放在 JSX 元素中，除非它们直接在渲染函数中。不过我可能是错的......
-
如果你的片段只包含一个孩子，那么它可能不需要是一个片段。你能描述一下你得到的实际错误吗？控制台中有任何东西吗？另外，
tourcards是什么数组？您可能在那里使用了不正确的语法。 -
看起来你不需要将这些组件中的任何一个包装在 React Fragments 中，因为它们只有一个父级。我不知道为什么将它们包装在 Fragments 中会导致它失败，但您可以尝试删除包装所有内容的空标签。
-
@R10t-- 我编辑了我的返回语句以从 google-maps-react 中排除成功呈现的 google 地图。
-
@Khauri 我在控制台或浏览器中没有收到任何错误。正如我在回复 R10t-- 时所说，我故意在我的问题中编辑了我的 return 语句，以排除一些成功呈现的代码。