Discussion :

[Huyenlong]

Bonjour

Je tente d 'importer deux class qui sont dans des fichier js séparés au sein d'une class qui est dans un troisième fichier js. Quand je le fais avec une class ça marche mais deux non.

je teste certaines possibilité du code react tout en apprenant. Là je voulais apprendre à voir comment regrouper plusieurs fichier et class js dans un et tester les forms en react.

Voici les 3 codes :

1 ère class dans le fichier TxtCount :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
import React, { Component, useState }  from 'react'
 
function TheOneWhoHasTheState() {
    const [count, setCount] = useState(0);
    let NumberCount = () => {
      setCount(count + 1);
    };
    return (
      <div>
        <p>Counter is now {count}</p>
        <TheButton onClck={NumberCount} />
        <TheButton onClck={NumberCount} />
        {TheTest}
      </div>
     );
  }
 
  const TheButton = ({ onClck }) => (
    <div onClick={onClck}> Click here to add </div>
  );
 
 const TheTest = (
 <div>
     <h1> sdfsdf</h1>
 </div>
 )
 
    class Txtcount extends Component {
 
        render () {
            return (
                <TheOneWhoHasTheState/>
            )
        }
    }
 
    export default Txtcount;

le second fichier TestEvent :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
import React, { Component } from 'react';
class SimpleForm extends Component {
    constructor(props) {
      super(props);
 
      this.state = {
        fullName: ""
      };
    }
 
    handleSubmitForm(event) {
      alert("Full Name: " + this.state.fullName);
      event.preventDefault();
    }
 
    handleChange(event) {
      var value = event.target.value;
 
      this.setState({
        fullName: value
      });
    }
 
    render() {
      return (
        <form onSubmit={event => this.handleSubmitForm(event)}>
          <label>
            Full Name:
            <input
              type="text"
              value={this.state.fullName}
              onChange={event => this.handleChange(event)}
            />
          </label>
          <input type="submit" value="Submit" />
          <p>{this.state.fullName}</p>        
        </form>
      );
    }
  }
 
  export default SimpleForm;

le fichier app où je fusionne les deux :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
import React, { Component } from 'react';
import Txtcount from './TxtCount';
import SimpleForm from './TestEvent';
 
 
class App extends Component {
    render() {
      return (
        <Txtcount />
        <SimpleForm />
 
      )
    }
  }
 
  export default App;

voici le code d error :

Line 10:9: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

8 | return (
9 | <Txtcount />
> 10 | <SimpleForm />
| ^
11 |
12 | )
13 | }

Merci pour l aide

[gwyohm]

Salut,

ton problème, c'est qu'un composant doit avoir une seule racine. Dans ton fichier app, tu renvoies Txtcount et SimpleForm.
La bonne nouvelle, c'est que même si c'est qu'il existe un composant qui permet d'avoir un virtual node sans rendu, on l'appelle fragment (React.Fragment)

c'est d'ailleurs ce que tu vois dans le message d'erreur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
class App extends Component {
    render() {
      return (
        <>
          <Txtcount />
          <SimpleForm />
        </>
      )
    }
  }

A noter qu'à un moment, le raccourci <></> n'existait pas, il fallait faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
class App extends Component {
    render() {
      return (
        <React.Fragment>
          <Txtcount />
          <SimpleForm />
        </React.Fragment>
      )
    }
  }

[Huyenlong]

ok merci, j'ai bien compris

Et merci pour le temps que tu donnes pour aider