小编ims*_*elp的帖子

我正在尝试在一个我很久没有参与过的 React 项目上启动开发服务器。运行后npm install，npm start我收到了标题错误消息。
我尝试手动更新然后降级 Node-sass，但无论我做什么，我仍然遇到相同的错误。这是我收到的完整错误消息。

Failed to compile.

./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss)
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.
/home/dylan/Desktop/Werk/Professional stuff/SkylimitHost/node_modules/react-scripts/scripts/start.js:19
  throw err;
  ^

[Error: ENOENT: no such file or directory, stat '/home/dylan/.steampath'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'stat',
  path: '/home/dylan/.steampath'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! cleanapp@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the cleanapp@0.1.0 start script.
npm ERR! …

我试图让我的每个应用程序页面的标题根据当前页面更改颜色。我如何努力实现这一目标：

<Header className="headerBitcoin"></Header>

我想要的是能够让 header 组件出现在所有 4 个页面上，然后只需将 className 更改为另一个 prop 即可更改背景，但不能更改其他任何内容。
以及标头组件本身

import styles from "../../styles/Home.module.css";
export default function Header(props) {
  return (
    <div >
      <div className={props.className}>aaaaa</div>
      <div className={styles.row}>
        <div className={styles.tab}>a</div>
        <div className={styles.tab}>a</div>
        <div className={styles.tab}>a</div>
        <div className={styles.tab}>a</div>
      </div>{" "}
    </div>
  );
}

目前，选项卡和行的样式正在运行，但标题未应用其样式。
我检查了控制台，发现标头正在将 classNameheaderBitcoin传递给它，但是它下面的行的 className 为"Home_row__88lPM"
这是我第一次使用 next.js，我知道我做错了什么，因为这在 React 中有效。任何帮助，将不胜感激。

我有三个 div，我想垂直排列，不幸的是，我找到的每个解决方案都只使用position:absolute或 flexbox 中的一个，而我不能使用其中任何一个，因为它会影响页面上我无法控制的其他内容。目前这是我的代码：

<div
    class="search-wrapper  text-center "
    style=""
>
        <div
            class="col-md-7 perfect-vacation white "
            style="font-family:lora;letter-spacing:0px;font-style:italic;font-size:clamp(1.3rem,  3.9vw, 2.9em);white-space:nowrap;"
        >
           <div> find your perfect cruise vacation</div>
        </div>
        <div id="search-cruises" class=" col-md-2" style="">
            <a
                href="/search-cruise/cruises"
                class="green-btn button"
                data-track="search-track"
                data-track-id="search-widget"
                style="background:#6D9D5B;padding:10px;
                            border-color:#6D9D5B;font-size:clamp(1.1em, 1vw, 1.4em);white-space:nowrap;"
            >
                Search Cruises
            </a>
        </div>
           <div class="col-md-3" style="">
            <a
                class="white recent-cruise "
                style="font-family:Roboto;white-space:nowrap;font-size:clamp(.8em, 1vw, 1.4em);color:white;overflow:visible;"
            >
                See Recently Viewed Cruises
            </a>
        </div>
</div>

看起来像这样（没有红线），我希望所有 3 个项目都与红线对齐。任何建议将不胜感激。

我将用户单击的按钮的值传递给具有以下函数的数组。

 const [pizzaSize, setPizzaSize] = useState("Choose your Pizza Size");
  const [startPrice, setStartPrice] = useState(0);
  const addPizza = (e) => {
    setPizzaSize(e.target.name);
    setStartPrice(parseInt(e.target.value));
  };

我想使用自定义按钮组件来打开和关闭它，就像我已经在同一页面上使用其他按钮一样。

const ButtonClickable3 = (props) => {
    const [isActive, setActive] = useState("false");
    const handleToggle = (e) => {
     setActive(!isActive);
     props.onClick(e)
    }; 
     return <button
               type="button"
               value={props.value}
               className={isActive ? "button btn fourth" : "button btn fourthActive"}
               onClick={handleToggle}
             >
              {props.name}
             </button>
   
   }

最后我调用函数如下

<ButtonClickable3 name="test" value="5" onClick={(event) => addPizza(event)}></ButtonClickable3>

当我使用常规按钮时，该功能起作用，所以我很难理解为什么自定义按钮不起作用。
我的自定义按钮 1 和 2 也可以使用，但它们使用的是不同的功能。我已经把我的全部代码在codesandbox这里。
我预先感谢您的帮助。

我正在尝试在我的网站主页上构建一个小型预览部分，显示产品页面的前 3 个项目，其中所有项目都位于其中，并具有如下所示的地图功能。

{goldendoodles.map((goldendoodles) => (
       
          <Card style={{width: '20rem'}}>
          <img className="cardimage" src={goldendoodles.image} alt={goldendoodles.name} />
          <h1>{goldendoodles.name}</h1>
          <p>{goldendoodles.price}</p>
        
        
        <h1>{goldendoodles.description}</h1>
          </Card>
      ))}
    ```

目前它正在按预期映射所有项目，
我想知道是否有一种方法可以仅映射数组中的一定数量的项目，而不是整个项目？感谢您的时间。