Question

如何使用react.js中的map函数在代码块下面重复？我想重复在class specialties_check_list内有div内有class specialties_check_outer的代码块。

<div class="specialties_check_outer">
<div class="specialties_check_list">
    <div class="left_side">
        <div class="experience_type">
            <p><label class="check_boxes"><input type="checkbox"><span class="checkmark"></span></label><span class="label_name">AR/VR</span></p>
        </div>
    </div>

    <div class="right_side">
        <div class="experience_type">
            <p><label class="check_boxes"><input type="checkbox"><span class="checkmark"></span></label><span class="label_name">Backend</span></p>
        </div>
    </div>
</div>

<div class="specialties_check_list">
    <div class="left_side">
        <div class="experience_type">
            <p><label class="check_boxes"><input type="checkbox"><span class="checkmark"></span></label><span class="label_name">Computer Vision</span></p>
        </div>
    </div>

    <div class="right_side">
        <div class="experience_type">
            <p><label class="check_boxes"><input type="checkbox"><span class="checkmark"></span></label><span class="label_name">Data</span></p>
        </div>
    </div>
</div>

<div class="specialties_check_list">
    <div class="left_side">
        <div class="experience_type">
            <p><label class="check_boxes"><input type="checkbox"><span class="checkmark"></span></label><span class="label_name">Frontend</span></p>
        </div>
    </div>

    <div class="right_side">
        <div class="experience_type">
            <p><label class="check_boxes"><input type="checkbox"><span class="checkmark"></span></label><span class="label_name">Full Stack</span></p>
        </div>
    </div>
</div>

Answer 1

       // Child component which will return the list of inner content

        const myList = (<props if you want to send any>) => (  <div class="specialties_check_list">   
                <div class="left_side">
                    <div class="experience_type">
                        <p><label class="check_boxes"><input type="checkbox"><span class="checkmark"></span></label><span class="label_name">AR/VR</span></p>
                    </div>
                </div>

                <div class="right_side">
                    <div class="experience_type">
                        <p><label class="check_boxes"><input type="checkbox"><span class="checkmark"></span></label><span class="label_name">Backend</span></p>
                    </div>
                </div>
            </div> )    


     // Main class
         render() {

            return (
//Assuming you have put the data in state
            <div class="specialties_check_outer">
                { this.state.data.map((item, index) =>  ( <myList /> ))}  
            </div>
            )

            }

如何在reactjs的map函数的返回中设置条件？

1 个答案: