javascript - React Native，如何创建有状态组件的多个实例？

Question

假设我有一个组件“绘图”，它有自己的状态，如画笔、颜色选择、背景图像等。我有另一个名为“Multiple Drawings”的组件，现在我想在“Multiple Drawings”中创建多个“Drawing”组件实例。当用户对任何组件进行更改时，所有数据都应限制在该特定组件中（我不希望所有数据都驻留在“多图”父组件中）。如何实现

export default class Drawing extends Component
{
    constructor()
    {
        super();
        this.state=
        {
            BrushWidth:10,
            BrushOpacity:50,
            SelectedColor:'red',
        }
    }
}

export default class MultipleDrawing extends Component
{
    constructor()
    {
        super();
        this.state=
        {
            AllDrawings:[],
            SelectedDrawingIndex:0
        }
    }
}
componentWillMount()
{
    let allDrawings=[]
    allDrawings.push(<Drawing/>)
    allDrawings.push(<Drawing/>)
    this.state.AllDrawings=allDrawings
}
render(){
    return(
        <View>
            {this.state.AllDrawings[this.state.SelectedDrawingIndex]}
        </View>
    )
}

标签： javascriptreact-native