react里面Fragments的使用

關於react Fragments,React 中一個常見模式是為一個組件返回多個元素。Fragments 可以讓你聚合一個子元素列表，並且不在DOM中增加額外節點。

render() {
    return (
        <>
            <ChildA />
            <ChildB />
            <ChildC />
        </>
    );
}

 

但是我在實際運用中，碰到了問題，比如一組單選按鈕

<RadioGroup defaultValue={this.state.flag} size="large">
    <RadioButton value="1" style={{marginLeft:'10px'}}>
        <Icon type="flag" className={flag(1)+' fs16'} />
    </RadioButton>
    <RadioButton value="2" style={{marginLeft:'10px'}}>
        <Icon type="flag" className={flag(2)+' fs16'} />
    </RadioButton>
    <RadioButton value="3" style={{marginLeft:'10px'}}>
        <Icon type="flag" className={flag(3)+' fs16'}/>
    </RadioButton>
    <RadioButton value="4" style={{marginLeft:'10px'}}>
        <Icon type="flag" className={flag(4)+' fs16'}/>
    </RadioButton>
    <RadioButton value="5" style={{marginLeft:'10px'}}>
        <Icon type="flag" className={flag(5)+' fs16'}/>
    </RadioButton>
</RadioGroup>

所有的單選按鈕是有規律可選，為了優化代碼，我打算進行簡寫，提到一個方法里面,提到方法后，不能用容器去包裹這些RadioButton,包裹后，這個組件的一些功能會失效，比如默認選中，所以只能用空標簽，想到了之前看到的flagments

https://doc.react-china.org/docs/fragments.html

 

eg:

radiosBtns(){
    return(
        <>
            <RadioButton value="1" style={{marginLeft:'10px'}}>
                <Icon type="flag" className={flag(1)+' fs16'} />
            </RadioButton>
            <RadioButton value="2" style={{marginLeft:'10px'}}>
                <Icon type="flag" className={flag(2)+' fs16'} />
            </RadioButton>
            <RadioButton value="3" style={{marginLeft:'10px'}}>
                <Icon type="flag" className={flag(3)+' fs16'}/>
            </RadioButton>
            <RadioButton value="4" style={{marginLeft:'10px'}}>
                <Icon type="flag" className={flag(4)+' fs16'}/>
            </RadioButton>
            <RadioButton value="5" style={{marginLeft:'10px'}}>
                <Icon type="flag" className={flag(5)+' fs16'}/>
            </RadioButton>
        </>
    )
}

我發現報錯了

 

然后查了些資料，找了些方法

 

 

 

第一種，直接返回數據

react 16開始， render支持返回數組，知道這個特性的人不在少數。這一特性已經可以減少不必要節點嵌套，小伙伴們可以多多用起來。

radiosBtns(){
    return(
        [
            <RadioButton value="1" style={{marginLeft:'10px'}}>
                <Icon type="flag" className={flag(1)+' fs16'} />
            </RadioButton>,
            <RadioButton value="2" style={{marginLeft:'10px'}}>
                <Icon type="flag" className={flag(2)+' fs16'} />
            </RadioButton>,
            <RadioButton value="3" style={{marginLeft:'10px'}}>
                <Icon type="flag" className={flag(3)+' fs16'}/>
            </RadioButton>,
            <RadioButton value="4" style={{marginLeft:'10px'}}>
                <Icon type="flag" className={flag(4)+' fs16'}/>
            </RadioButton>,
            <RadioButton value="5" style={{marginLeft:'10px'}}>
                <Icon type="flag" className={flag(5)+' fs16'}/>
            </RadioButton>
        ]
    )
}

以為這樣就好了，但是悲劇的是，還是報錯了，

Each child in an array or iterator should have a unique "key" prop.數組或迭代器中的每個子元素都應該有一個唯一的“key”，然后我加了key

https://doc.react-china.org/docs/lists-and-keys.html

當元素沒有確定的id時，你可以使用他的序列號索引index作為key

如果列表可以重新排序，我們不建議使用索引來進行排序，因為這會導致渲染變得很慢

https://doc.react-china.org/docs/reconciliation.html#%E9%80%92%E5%BD%92%E5%AD%90%E8%8A%82%E7%82%B9

radiosBtns(){
    return(
        [
            <RadioButton value="1" key="1" style={{marginLeft:'10px'}}>
                <Icon type="flag" className={flag(1)+' fs16'} />
            </RadioButton>,
            <RadioButton value="2" key="2" style={{marginLeft:'10px'}}>
                <Icon type="flag" className={flag(2)+' fs16'} />
            </RadioButton>,
            <RadioButton value="3" key="3" style={{marginLeft:'10px'}}>
                <Icon type="flag" className={flag(3)+' fs16'}/>
            </RadioButton>,
            <RadioButton value="4" key="4" style={{marginLeft:'10px'}}>
                <Icon type="flag" className={flag(4)+' fs16'}/>
            </RadioButton>,
            <RadioButton value="5" key="5" style={{marginLeft:'10px'}}>
                <Icon type="flag" className={flag(5)+' fs16'}/>
            </RadioButton>
        ]
    )
}

這樣就可以了

第二種，React.Fragment

Flagments的簡寫形式是<></>，很吊的樣子，但目前有些前端工具支持的還不太好，用 create-react-app 創建的項目就不能通過編譯，所以這點懶還是不能偷，多寫幾個字符

radiosBtns(){
    return(
        <React.Fragment>
            <RadioButton value="1" style={{marginLeft:'10px'}}>
                <Icon type="flag" className={flag(1)+' fs16'} />
            </RadioButton>
            <RadioButton value="2" style={{marginLeft:'10px'}}>
                <Icon type="flag" className={flag(2)+' fs16'} />
            </RadioButton>
            <RadioButton value="3" style={{marginLeft:'10px'}}>
                <Icon type="flag" className={flag(3)+' fs16'}/>
            </RadioButton>
            <RadioButton value="4" style={{marginLeft:'10px'}}>
                <Icon type="flag" className={flag(4)+' fs16'}/>
            </RadioButton>
            <RadioButton value="5" key="5" style={{marginLeft:'10px'}}>
                <Icon type="flag" className={flag(5)+' fs16'}/>
            </RadioButton>
        </React.Fragment>
    )
}

這樣就可以了