javascript - 如何在 React 中设置每个组件的样式？

Question

我有以下 React 代码，它是用于滚动功能的 CSS。当我执行 props.children.map 时，它给我一个错误“TypeError:props.children.map 不是函数”。这可能是一个简单的错误，因为我仍在学习 React.js。任何帮助，将不胜感激。谢谢!

**Scroll.js**

import React from 'react';
import './Scroll.css'

const Scroll = (props) => {

    return(
        <div class="slider">
        <div class="slide">

        {props.children.map((component) => 
        <div class="slide"> component </div>)
        }

        </div>
        </div>
    );
};
export default Scroll;

Scroll.css

.slider {
  width: 300px;
  height: 300px;
  display: flex;
  overflow-x: auto;
}
.slide {
  width: 300px;
  flex-shrink: 0;
  height: 100%;
}

Answer 1

您收到的错误是有道理的，因为 children 只是一个 ReactNode ，而 map 仅适用于多个值的数组。

你可以这样做:

import React from "react";
import "./Scroll.css";

const Scroll = props => {
  return (
    <div class="slider">
      <div class="slide">{props.children}</div>
    </div>
  );
};
export default Scroll;

并调用Scroll，如下所示:

const SomeParentComponent = () => {
  return (
    <Scroll>
      <div>
        <SomeChild />
        <SomeChild />
        <SomeChild />
      </div>
    </Scroll>
  );
};