小编Mar*_*oG8的帖子

import Footer from "./Footer";
import Navigation from "./Navigation";
import { useRouter } from "next/router";

function Layout({ children }) {
  const router = useRouter();
  return (
    <>
      {router.pathname !== "/*" && <Navigation />}
      {/* {router.pathname !== "*" && <Navigation />} */}
      <main className="main-content">{children}</main>
      {router.pathname !== "/*" && <Footer />}
      {/* {router.pathname !== "*" && <Footer />} */}
    </>
  );
}

export default Layout;

不幸的是，带有星号的方法不起作用：/？！？

预先感谢您并向大家致以最诚挚的问候;-)

我希望将这三个图像堆叠在一起。我不在乎它们是否显示为动画，并且两个图像会从每个图像的侧面水平弹出。

然而我遇到了一个问题。

请参阅附图：

所有三个 SVG 都包含在以下结构中：

<ImageContainer>
  <MainIcon />
  <JobListingIcon />
  <SingularListing />
</ImageContainer>;

这是在弹性框中：

const ImageContainer = styled.div`
    width: 90%;
    height: 400px;
    margin-top: 20px;
    background-color: #636388;

    display: flex;

    align-items: center;
    justify-content: center;
    flex-direction: row;
`;

我不明白为什么它们以这种方式显示，我尝试将所有 3 个 SVG 绝对定位，但什么也没有。

这些堆叠的方法是什么？它不是一个弹性盒子吗？可能类似于 MUI 网格之类的东西？

对不起！

试图从天气 API 中提取数据并将其显示在 React 中是一场噩梦，但是当我运行代码时出现错误：

“对象作为 React 子对象无效（已找到：[object Promise]）。如果您打算渲染子对象的集合，请改用数组。”

我的代码如下：

export default function getWeatherFromApiAsync() {
  return fetch(
    "https://api.openweathermap.org/data/2.5/weather?q=brighton,uk&appid=8b609354454cdb6c5a7092a939861ace&units=metric"
  )
    .then((response) => response.json())
    .then((responseJson) => {
      return (
        <div className="App">
          {responseJson.map((weather) => (
            <div>
              <h6> {weather.coord.lon}</h6>
            </div>
          ))}
        </div>
      );
    })
    .catch((error) => {
      console.error(error);
    });
}

任何帮助表示赞赏！

我是一个反应新手，我试图在提交表单（在我的例子中是搜索栏）后（使用 onSubmit 事件）在一组不同的组件上进行路由。我将搜索组件封装在 withRouter 中，并解构了历史记录。我尝试过使用 onClick 并且推送确实会触发，但似乎没有对 onSubmit 执行任何操作。希望您的建议。

谢谢

搜索组件

const SearchAppBar = (props) => {\n  const {\n    history,\n    onPlatformDrop,\n    onPlatformChange,\n    onPriceRangeDrop,\n    clearPriceRange,\n    searchQuery,\n    setSearchQuery,\n    clearGenre,\n    onDropDownChange,\n  } = props;\n  return (\n    <Box sx={{ flexGrow: 1 }}>\n      <Search\n        sx={{\n          width: { xs: "85vw", md: "50vw", lg: "30vw" },\n          margin: "auto",\n          marginBottom: "20px",\n        }}\n      >\n        <form action="/" method="get" style={{ display: "flex" }}>\n          <StyledInputBase\n            defaultValue={searchQuery}\n            autoComplete="off"\n            placeholder="Search All Games\xe2\x80\xa6"\n            inputProps={{ "aria-label": "search" }}\n            type="search"\n            name="s"\n            id="site-search"\n          />\n\n          <SearchIconWrapper>\n …

<select name="color" class="form-control" id="color">
  <option value="">Choose</option>
  <option style="color:#0071c5;" value="#0071c5">&#9724; Dark blue</option>
  <option style="color:#40E0D0;" value="#40E0D0">&#9724; Turquoise</option>
  <option style="color:#008000;" value="#008000">&#9724; Green</option>
  <option style="color:#FFD700;" value="#FFD700">&#9724; Yellow</option>
  <option style="color:#FF8C00;" value="#FF8C00">&#9724; Orange</option>
  <option style="color:#FF0000;" value="#FF0000">&#9724; Red</option>
  <option style="color:#000;" value="#000">&#9724; Black</option>
</select>

颜色不显示需要安装一些插件吗？我想实现这一目标，但我只得到黑匣子

当我直接在 Nodemailer 服务器中设置用户名和密码时，它按预期工作

auth: {
    user: 'myusername',
    pass: 'mypassword'
},

但是使用 dotenv 时，没有任何反应

require ('dotenv').config();

auth: {
  user: process.env.USERNAME,
  pass: process.env.PASSWORD
},

我npm install dotenv在服务器端运行并设置一个.env包含以下变量的文件：

USERNAME:myusername

PASSWORD:mypassword

我有以下 JS 代码，我根据 API 的响应密钥显示不同的状态。有没有更好的方法来优化此代码，以便我不必使用 IF 检查每种情况，以防状态数量增加

if (data.shippingStatus) {\n  let shippingStatus = data.shippingStatus.toString();\n  if (shippingStatus === "AWAITING_SHIPMENT") {\n    shippingStatus = "Awaiting Shipment";\n  } else if (shippingStatus === "SHIPPED") {\n    shippingStatus = "Shipped";\n  } else if (shippingStatus === "DELIVERED") {\n    shippingStatus = "Delivered";\n  } else if (shippingStatus === "CANCELLED") {\n    shippingStatus = "Cancelled";\n  }\n  resData.push(setData(data.shippingStatus ? shippingStatus : ""));\n}\n

早上好，我需要重现这个形状，但我不知道如何正确重现蓝色背景。你有什么主意吗？绝对位置不适合我，因为它是响应式图像。对于图像，我使用了旋转属性：

  .content {
  display: flex;
  .image {
    flex: 0 0 50%;
    img {
      transform: rotate(85deg);
    }
    @include media-screen-lg {
      padding-left: 24px;
      padding-right: 0;
    }
  }

<div class="content">
  <div class="text"></div>
  <div class="image">
    <img src={{content.field_image}}>
  </div>
</div>

nav {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

nav a {
  padding: .4rem;
}

.logo {
  justify-self: start;
  display: block;
}

<nav>
  <a href="/" class="logo"><img src="/static/logo.svg" alt="PurelyGigs" /></a>
  <a href="/gigs">Gigs</a>
  <a href="/login">Login</a>
  <a href="/register">Signup</a>
</nav>

我正在尝试使用弹性盒将徽标仅向左对齐，将其他三个导航项向右对齐...而不必使用包装器