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>
  );
};

Answer 2

您可以像这样在对象中转换css

const styles = ({
input: {
    display: 'none',
},
pointerBorder: {
    borderWidth: '4px',
    borderStyle: 'dashed',
    borderColor: 'grey',
    paddingTop: '40px',
    paddingBottom: '40px',
},
iconUpload: {
    fontSize: '100px',
    cursor: 'pointer',
}

}）;

这只是一个例子。要使用，只需调用de object

            <div className={styles.input}>

还有一件事。尝试注释代码

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

再次运行，我认为这不是样式问题。

如何在React中为每个组件设置样式？

2 个答案: