Question

我是反应原生的新人，我正在为Android编写我的第一个大应用程序。我需要在屏幕上动态渲染按钮，并在自己的View标签中关闭它们中的每一个，以使它们保持在一行中。这是我试图实现的结构

<View>
    <Button />
    <Button />
    <Button />
</View>
<View>
    <Button />
    <Button />
    <Button />
</View>
<View>
    <Button />
    <Button />
    <Button />
</View>
etc...

在我意识到我需要在视图标记内将它们分组3之前，我创建了这样的代码：

render() {
    const mappedButtons = reversed_buttons.map((button, i) => {
        if (reversed_types[i] == 1) {return (<Floor key={i} content={button}/>)}
        else {return (<Step key={i} title={button}/>)}
    })
    return (
    <View>
        {mappedButtons}
    </View>)
}

它工作正常但我不知道如何关闭他们自己的视图标签中的每个Step-tag。我试图在每个第三个按钮的开始和关闭以及打开标签时返回打开的视图标记但我得到错误500。我试图这样做：

 render() {
        var reversed_buttons = [ ];
        var reversed_types = [ ];
        for (var i = buttons.length-1; i >= 0; i--) {
            reversed_buttons.push(buttons[i]);
            reversed_types.push(types[i]);
        }
        const mappedButtons = reversed_buttons.map((button, i) => {
            var y = i%3;
            if (i == 0){return(<View>)}
            if (i == 2){return(</View><View>)}
            if (reversed_types[i] == 1) {return (<Floor key={i} content={button}/>)}
            else {return (<Step key={i} title={button}/>)}
        })
        return (
        <View>
            {mappedButtons}
        </View>)
    }

也是这样：

render() {
    const mappedButtons = reversed_buttons.map((button, i) => {
        var y = i%3;
        if (reversed_types[i] == 1) {return (<Floor key={i} content={button}/>)}
        else {
            if (i == 0){
                return (<View><Step key={i} title={button}/>)
            }
            if (y == 2){
                return (</View><View><Step key={i} title={button}/>)
            }
        }
    })
    return (
    <View>
        {mappedButtons}
    </View>)
}

但是这件事仍然不想在控制台中给我错误500。

Answer 1

这样就可以了。我首先将较大的数组分解为不超过3的单个数组。然后，我映射这些数组以创建每个组。

const buttons = ['b1', 'b2', 'b3', 'b4', 'b5', 'b6', 'b7', 'b8', 'b9', 'b10', 'b11', 'b12', 'b13', 'b14', 'b15', 'b16', 'b17'];
const button_groups = [];

while (buttons.length) {
  button_groups.push(buttons.splice(0, 3));
}

const renderButtons = button_groups.map(group => {
  const btns = group.map(title => <Button>{title}</Button>);
  return <View>{btns}</View>;
})

映射时关闭自己的<view>标记内的每个3个按钮

1 个答案: