向组件返回添加循环

Question

好的，我有一个react-app，它有一个组件，看起来像这样

import { TimeLine, Monday, Tuesday, Wednesday, Thursday, Friday } from './WorkSchedComponents';



class WorkSched extends Component {
            render() {
                return(
                    <div>
                        <div className='header'>
                        <h1>Schedule</h1>
                        </div>
                        <Container>
                            <Row>
                                <div className='timeline'><TimeLine /></div>
                                <div className='data-class'><Monday /></div>
                                <div className='data-class'><Tuesday /></div>
                                <div className='data-class'><Wednesday /></div>
                                <div className='data-class'><Thursday /></div>
                                <div className='data-class'><Friday /></div>
                            </Row>
                        </Container>
                    </div>
                );
        }
}

我在这里一个接一个地添加所有的日期组件。有没有什么方法可以使用循环来添加这些组件，比如使用map？

Answer 1

类似于：

[Monday, Tuesday, Wednesday, Thursday, Friday]
     .map(component => <div className='data-class'><component/></div>);

例如：

<Container>
    <Row>
        {
        [Monday, Tuesday, Wednesday, Thursday, Friday]
            .map(component => <div className='data-class'><component/></div>);
        }
    </Row>
</Container>

您还应该向div中添加一个key，以帮助React识别何时发生了更改。

顺便说一句，您每天都有单独组件的方法似乎不是最优的。如果只有一个Day组件，并作为一个道具传递进来，那会怎么样？