react native如何避免jsx样式错误？

Question

每当我尝试从头开始构建 UI 时，都会收到此错误 adjacent jsx element must be wrapped in an enclosing tag。我不知道如何解决这个问题。因为我尝试了不同的方法，所以我尝试将块放在View 组件中，flex:1 但未使用。是否有任何适当的解决方案。这对我来说是一个巨大的挑战，因为我无法设计自己的任何组件。该怎么办请帮帮我。以下是我的代码。

screen.js

   export default  class FirstScreen extends Component {
  constructor(props){
super(props);
this.state = {
 showPopupDialog: false,
 workType: "",
 workers: []
}
}
      componentWillMount(){
            fetch('http://192.168.1.6:3000/api/worker', {
              method:'GET',
              headers:{
                Accept: 'application/json'
              }
            })
            .then(response => response.json())
            .then(responseData =>
              this.setState({
              workers:responseData
              })
            )
      }
      onPressYes = (workType) => {
       console.log(workType);
      }

popupDialog = (id, workType) => {
  this.setState ({
     showPopupDialog: true,
     workType: workType
  });
  //make sure you set showPopupDialog to false and workType to "" when you click yes or no button in PopupDialog component so that it will work the next time you click on card
}
render() {
    const { workers, workType, showPopupDialog} = this.state;
    return (
      <View style={{flex:1}}>
          <Header />
             <ScrollView>
                {workers.map((a, index)=> (
                   <View style={{flex:1}}>
                      <CardSection>
                        <TouchableOpacity onPress={() => this.popupDialog(a.id, a.work_type)}>
                          <View style={{ maringTop: 10, marginLeft:120}}>
                            <Image style={{ height: 100, width: 100 }} source={{ uri: a.work_type == 'Carpenter' ? images[0].image : images[1].image}}/>
                            <Text style={{marginLeft:20, fontSize:20}}>{a.work_type}</Text>
                          </View>
                        </TouchableOpacity>
                      </CardSection>
                      </View>
                  ))}
                  {showPopupDialog && <PopupDialog
                        dialogStyle={{ backgroundColor: "#FFFFFF", height: 180, width:300, borderWidth:1,padding:10}}
                        overlayBackgroundColor="#fff" dismissOnTouchOutside={true}>
                          <View style={styles.dialogContentView}>
                            <Text style={{fontSize:18, margingTop:10,color:"#000000"}}>Are you sure you want to submit?</Text>
                            <View style={{flexDirection:'row'}}>
                              <View style={styles.button_1}>
                                <Button title="Yes" color="#FF6633" onPress={() => this.onPressYes(workType)}/>
                              </View>
                              <View style={styles.button_1}>
                                <Button title="No" color="#FF6633" onPress={() =>this._onPressNo() }/>
                              </View>
                            </View>
                          </View>
                        </PopupDialog>}
                </ScrollView>
              </View>
            );
          }
        }

我面临的问题是我无法将 <PopupDialog> 组件与 <CardSection> 相邻，为此我将 <PopupDialog> 放在 <View> 中，即使它不能解决我的问题.请帮忙..请

Answer 1

如果我正确理解您的问题... 您可以通过将 is 包装在 <React.Fragment> 元素中来返回 jsx 中的多个根元素（您可以在 v16.2 及更高版本中使用 <> 和 </>）。片段是 React v16 中的新功能。在此之前，您只需将它们包装在某个元素中（通常是 div 或 span）。

Answer 2

试试下面更正的代码。

有两点需要改正

1. 您正在执行 .map 但您没有返回我拥有的任何内容 在下面的代码中更正

export default  class FirstScreen extends Component {
  constructor(props){
super(props);
this.state = {
 workType: "",
 workers: []
}
}
      componentWillMount(){
            fetch('http://192.168.1.6:3000/api/worker', {
              method:'GET',
              headers:{
                Accept: 'application/json'
              }
            })
            .then(response => response.json())
            .then(responseData =>
              this.setState({
              workers:responseData
              })
            )
      }
      onPressYes = (workType) => {
       console.log(workType);
      }

popUpDialog = (id, workType) => {
  this.setState ({
     workType: workType
  });
  this.popupDialog.show();

  //make sure you set workType to "" when you click yes or no button in PopupDialog component so that it will work the next time you click on card
}
render() {
    const { workers, workType} = this.state;
    return (
      <View style={{flex:1}}>
          <Header />
             <ScrollView>
                {workers.map((a, index)=> (
                   <View style={{flex:1}}>
                      <CardSection>
                        <TouchableOpacity onPress={() => this.popUpDialog(a.id, a.work_type)}>
                          <View style={{ maringTop: 10, marginLeft:120}}>
                            <Image style={{ height: 100, width: 100 }} source={{ uri: a.work_type == 'Carpenter' ? images[0].image : images[1].image}}/>
                            <Text style={{marginLeft:20, fontSize:20}}>{a.work_type}</Text>
                          </View>
                        </TouchableOpacity>
                      </CardSection>
                      </View>
                  ))}
                  <PopupDialog ref={popupDialog => {
                           this.popupDialog = popupDialog;
                         }}
                        dialogStyle={{ backgroundColor: "#FFFFFF", height: 180, width:300, borderWidth:1,padding:10}}
                        overlayBackgroundColor="#fff" dismissOnTouchOutside={true}>
                          <View style={styles.dialogContentView}>
                            <Text style={{fontSize:18, margingTop:10,color:"#000000"}}>Are you sure you want to submit?</Text>
                            <View style={{flexDirection:'row'}}>
                              <View style={styles.button_1}>
                                <Button title="Yes" color="#FF6633" onPress={() => this.onPressYes(workType)}/>
                              </View>
                              <View style={styles.button_1}>
                                <Button title="No" color="#FF6633" onPress={() =>this._onPressNo() }/>
                              </View>
                            </View>
                          </View>
                        </PopupDialog>
                </ScrollView>
              </View>
            );
          }
        }

Answer 3

问题是你有这个结构：

<a>
  {this.state.workers.map((a, index)=>
    <b/>
    <c/>
  )}
</a>

由于 <b/><c/> 被单独解析并且没有封闭元素，因此您会收到错误消息。但最终结构不需要封闭元素，确实有一个封闭元素。解决方案是简单地返回一个 JSX 元素数组，如下所示：

<a>
  {this.state.workers.map((a, index)=>
    [<b/>,
     <c/>]
  )}
</a>