Как избежать ошибки стиля JSX в реагировать родной?

Question

Всякий раз, когда я пытался создать пользовательский интерфейс с нуля, я получаю эту ошибку adjacent jsx element must be wrapped in an enclosing tag.Я не знаю, как это решить.Поскольку я пробовал разные методы, я пытался поместить блоки в компонент View с flex:1, но не использовал его.Есть ли правильное решение для этого.Это становится большим испытанием для меня, потому что я не могу создавать собственные компоненты.Что делать, пожалуйста, помогите мне.Вот мой код*, для этого я положил <PopupDialog> в <View>, хотя это не решает мою проблему. Пожалуйста, помогите .. Пожалуйста

Answer 1

Попробуйте с исправленным ниже кодом.

Есть две вещи, которые необходимо исправить

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 2

Проблема в том, что у вас есть эта структура:

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

Так как <b/><c/> анализируется отдельно, и в нем нет включающего элемента, вы получаете ошибку.Но заключительный элемент не обязателен для конечной структуры, которая имеет с включающим элементом.Решение состоит в том, чтобы просто вернуть массив элементов JSX, например:

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

Answer 3

Если я правильно понимаю ваш вопрос ... Вы можете вернуть несколько корневых элементов в jsx, заключив их в элемент <React.Fragment> (вы можете использовать <> и </> в v16.2и позже).Фрагменты являются новыми в React v16.До этого вам просто нужно обернуть их в какой-нибудь элемент (обычно div или span).