Question

在我的React应用程序中，我的变量中包含数组，它们被呈现为单个元素。例如，r: ['reply1-1', 'reply1-2']一起被渲染为reply1-1reply1-2。我不知道如何<br/>或单独制作button。

代码：

class App extends Component {
    constructor() {
        super();
        this.state = { currentDialog: 0 }
    }
    render() {
        var dialogs = [
            {
                id: uuid.v4(),
                q: 'dialog1',
                r: ['reply1-1', 'reply1-2']
            },
            {
                id: uuid.v4(),
                q: 'dialog2',
                r: ['reply2-1', 'reply2-2']
            },
            {
                id: uuid.v4(),
                q: 'dialog3',
                r: ['reply3-1', 'reply3-2']
            },
            {
                id: uuid.v4(),
                q: 'dialog4',
                r: ['reply4-1', 'reply4-2']
            }
        ]
        var replyList = dialogs.map(reply => {
            return (
                <div>
                    {reply.r}
                </div>
                );
        });

        return(
            <div className="App">
                {dialogs[this.state.currentDialog].q}
                <br /><br />

                {replyList[this.state.currentDialog]}

                <br /><br />

                <button onClick={() => {
                    this.currentDialogMinus()
                }}>PREV</button>
                <button onClick={() => {
                    this.currentDialogPlus()
                }}>NEXT</button>
            </div>)
    }
    currentDialogPlus() {
        this.setState(
            {
                currentDialog: this.state.currentDialog + 1
            }
        );
    }
    currentDialogMinus() {
        this.setState(
            {
                currentDialog: this.state.currentDialog - 1
            }
        );
    } 

}
export default App;

Answer 1

您只需要再次调用map()即可分别渲染它们。像这样：

var replyList = dialogs.map(reply => {
    return (
        <div>
            {reply.r.map(item => {
                <button type="button">{item}</button>
            })}
        </div>
    );
});

Answer 2

dialogs是一个数组，您可以使用map函数在对话框中迭代每个元素来正确地进行操作。但是，属性“ r”也是一个数组。因此，您还需要对此具有映射功能。如果您只是想将值分隔开新行，则可以为每个值添加一个div标签。像这样的东西。

var replyList = dialogs.map(reply => {
return (
  reply.r.map(value => {
    return (
      <div>
      {value}
      </div>
    ); 
  })
 );
});

如果要为reply.r数组中的每个元素创建一个按钮，则可以执行以下操作。

var replyList = dialogs.map(reply => {
return (
  reply.r.map(value => {
    return (
      <div>
      <button>{value}</button>
      </div>
      ); 
    })
  );
});

您也可以通过以下方式来减少冗长的内容。

var replyList = dialogs.map(reply => {
return (reply.r.map(value => <div><button>{value}</button></div>));
});

但是我建议您使用return语句来使其更具可读性。希望这会有所帮助。

如何呈现数组的单个元素？

2 个答案: