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

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

---

您可以在对象中转换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>)
    }

{props.children.map（（组件）=>
（组成部分）
}

---

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

您可以将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>)
    }

{props.children.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;

您得到的错误是有意义的，因为
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;

您可以在问题中添加如何使用
滚动
组件吗？儿童数据是什么？这是我使用滚动组件的方式。您可以在问题中添加如何使用
滚动
组件。儿童数据是什么？这是我使用滚动组件的方式问题的标题有误导性，但如果你阅读全文，Akshata Dabade不会直接询问样式。如果你再次阅读，你可以看到我谈论样式和类型错误我看到你添加了：）问题的标题有误导性，但如果你阅读全文，Akshata Dabade没有直接询问样式。如果您再次阅读，您可以看到我谈论了样式和TypeError我看到您添加了：）但我想设置props.children数组中的每个元素的样式。按照您显示的方式，设置整个数组的样式，而不是单独设置每个元素的样式。这里的map应该可以理想地工作，因为它有多个值。Well react将只接受一个子节点（您的
CardList
组件）因此，在您的情况下，似乎应该在较低的范围内进行样式设置-在您渲染的每张卡的
CardList
组件内。但我想对props.children数组中的每个元素进行样式设置。按照您显示的方式，设置整个数组的样式，而不是单独设置每个元素的样式。这里的map应该可以理想地工作，因为它有多个值。Well react将只接受一个子节点（您的
CardList
组件）因此，在您的情况下，样式设置似乎应该在较低的范围内完成—在您渲染的每张卡的
CardList
组件内。