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

问题在于您具有以下结构：

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

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

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

Answer 2

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

Answer 3

尝试使用以下更正的代码。

有两件事需要纠正

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

constraintlayout

如何在React Native中避免jsx样式错误？

3 个答案: