Question

我试图在我的本机代码中显示一个二维字符串数组，该数组是从本机代码传递过来的。传递代码不是问题，但是我并没有真正了解如何正确显示此数组。为了进行测试，我将消息数组在js代码中设为常量。

这是我的数组：

const messageArray = [
  ["msg1", "date1"],
  ["msg2", "date2"],
  ["msg3", "date3"],
  ["msg4", "date4"],
  ["msg5", "date5"]
];

如何将其渲染到视图中？

Answer 1

这是如何实现的示例。您可以使用解构。

const messageArray = [
  ["msg1", "date1"],
  ["msg2", "date2"],
  ["msg3", "date3"],
  ["msg4", "date4"],
  ["msg5", "date5"]
];

class App extends React.Component {
  render() {
    return (
      <div>
        {messageArray && messageArray.map(([message, date]) =>
          <div className='msg-item'>
            message: {message || ''}
            <br />
            date: {date || ''}
          </div>
        )}
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);

.msg-item {
  border: 1px solid black;
}

.msg-item + .msg-item {
  margin-top: 1rem;
}

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 2

使用jank的答案解决了此问题，适用于所有存在相同问题的人：

const messageArray = [
  ["msg1", "date1"],
  ["msg2", "date2"],
  ["msg3", "date3"],
  ["msg4", "date4"],
  ["msg5", "date5"]
];

export default class App extends Component {

    Render(){
        <View>
            {messageArray && messageArray.map(([message, date]) => <View>
            <Text>message: {message || ''}</Text>
            <Text>date: {date || ''}</Text>
            </View>)}
       </View>

}

如何在react-native中显示（二维）字符串数组

2 个答案: