React Native에서 JSX 구성 요소를 연결하는 방법

React Native에서 JSX 구성 요소를 연결하는 방법

예를 들어, 나는 이름 목록을 보여주고 싶다.그래서 저는 이렇게 하고 싶었어요.

var returnValue;
for (eachName of _names) {
  returnValue += (
  <TouchableHighlight
    onPress={() => this._onPressButton}>
      <Text>
      {eachName}
      </Text>
  </TouchableHighlight>);
}
return returnValue;

하지만 그것은 유효하지 않습니다.그래서 제 질문이 하나 생겼습니다.React Native에서 동적 양의 JSX 구성 요소를 연결하려면 어떻게 해야 합니까?

스택오버플로우를 물어보면 금방 알 수 있을 것 같아요.코드를 배열에 넣어야 합니다.

var returnValue = [];
for (var i = 0; i < _names.length; i++) {

  returnValue.push(
  <TouchableHighlight onPress={() => this._onPressButton}>
      <Text>
      {_names[i]}
      </Text>
  </TouchableHighlight>);
}
return returnValue;

상세한 것에 대하여는, http://facebook.github.io/react/docs/multiple-components.html#dynamic-children 를 참조해 주세요.

좀 더 우아한 방법:

return <View>
{_names.map((eachName) => {
  return (
    <TouchableHighlight onPress={() => this._onPressButton}>
      <Text>
      {eachName}
      </Text>
    </TouchableHighlight>
  );
})}
</View>

let returnValue = _names.map(eachName =>
 <TouchableHighlight
    onPress={() => this._onPressButton}>
      <Text>
      {eachName}
      </Text>
  </TouchableHighlight>);
return returnValue;

언급URL : https://stackoverflow.com/questions/29970434/how-to-concatenate-jsx-components-in-react-native