Importer deux class dans une class
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:
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:
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:
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 :
Citation:
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
