我正在开发本机应用程序，并为显示列表项创建了一个通用组件。
现在，我的ItemListSeparator只是遍历子项并呈现列表，所以我认为我应该使它成为无状态组件。
const ItemsWithSeparator = function ({children,style}) {
const childrenList = [];
const length = React.Children.count(children);
React.Children.forEach(
children,
(child,ii) => {
childrenList.push(child);
if (ii !== length -1) {
childrenList.push(
{children}
);
};
但这会引发错误，提示未找到“反应”。
但是，它可以与基于类的组件一起很好地工作。以下是运行良好的代码。
class ItemsWithSeparator extends React.Component {
render () {
const {children,style} = this.props;
const childrenList = [];
const length = React.Children.count(children);
React.Children.forEach(
children,
(child,ii) => {
childrenList.push(child);
if (ii !== length -1) {
childrenList.push(
{children}
);
}
}
谁能帮我理解这一点？TIA！
更新：
我只是尝试了一些尝试，显然让他工作了：-
const ItemsWithSeparator = function ({children,style,...props}) {
const childrenList = [];
const length = React.Children.count(children);
React.Children.forEach(
children,
(child,ii) => {
childrenList.push(child);
if (ii !== length -1) {
childrenList.push(
{children}
);
};
但是我仍然对此工作还是有些困惑。如果有人可以解释，我真的很棒。
这是重构版本，因此您不必执行此怪异的React.Children东西：D注意，映射子级时可以返回数组。如果需要，您可以在其中进行if语句。
const ItemsWithSeparator = ({children, style, ...props}) => {
const finalFields = children.map((child, index) => {
return [
child,
index !== children.length - 1 && (
{finalFields}
);
};
京公网安备 11010802040832号 | 京ICP备19059560号-6 