J'ai un React.Component avec render () déclaré de cette façon:
class Notification extends React.Component {
constructor(props) {
super(props)
this.state = {
message: "place holder",
visible: false
}
}
show(message, duration){
console.log("show")
this.setState({visible: true, message})
setTimeout(() => {
this.setState({visible: false})
}, duration)
}
change(message){
this.setState({message})
}
render() {
const {visible, message} = this.state
return <div>
{visible ? message : ""}
</div>
}
}
Et voici ma notification class:
render(){
return <div>
<button id="butt" onClick={()=> $("#noti").change("test") }>click me</button>
<Notification id="noti" onMounted={() => console.log("test")}/>
</div>
}
Comme le nom de la classe l'indique, j'essaie de créer une simple notification avec un message. Et je veux simplement afficher la notification en appelant noti.show (message, durée) .
Cependant, lorsque j'essaye de trouver noti en faisant window.noti , $ ("# noti") et document.findElementById ("noti") , ils me donnent tous undefined , tandis que noti s'affiche correctement. Et je peux trouver le bout en utilisant le code pour trouver noti.
Comment trouver le noti ? Je suis nouveau dans le front-end, veuillez donc être un peu plus précis pour expliquer.
5 Réponses :
Ce n'est pas une bonne idée d'utiliser la bibliothèque JQuery avec Reactjs. à la place, vous pouvez trouver une bibliothèque de réaction appropriée pour la notification ou toute autre chose.
Également dans React, nous utilisons ref pour accéder aux nœuds DOM.
Quelque chose comme ceci:
constructor(props) {
super(props);
this.noti = React.createRef();
}
...
<Notification ref={this.noti} onMounted={() => console.log("test")}/>
plus d'infos: https://reactjs.org/docs/refs-and-the-dom.html
Avant de commencer: L'utilisation de id / class pour atteindre les nœuds DOM n'est pas suggérée dans React.js, vous devez utiliser Ref. En savoir plus sur ici .
Dans votre premier render, vous donnez la propriété id au composant Notification. Dans react.js,
si vous passez une propriété à un composant, il en devient un accessoire composant. (en savoir plus ici)
Après avoir donné l'identifiant à Notification, vous devez prendre et utiliser ces accessoires spécifiques dans votre composant Notification.
Vous voyez que vous avez inséré une ligne de code super (props) dans le constructeur de Notification? Cela signifie, prenez tous les accessoires de la classe super (supérieure) et héritez-les dans cette classe.
Puisque id est une balise HTML, vous pouvez l'utiliser comme:
class Notification extends React.Component {
constructor(props) {
// inherit all props from upper class
super(props);
this.state = {
message: "place holder",
visible: false,
// you can reach all props with using this.props
// we took id props and assign it to some property in component state
id: this.props.id
}
}
show(message, duration){
// code..
}
change(message){
// code..
}
render() {
const {visible, message, id} = this.state
// give that id to div tag
return <div id={id}>
{message}
</div>
}
}
Comment atteindra-t-il le composant Notification par identifiant?
En utilisant simplement smth. comme ceci: document.findElementById (id) . Il n'a pas mentionné de l'atteindre en tant que composant, en tant que HTML.
@alpay document.findElementById (id) me donne undefined comme expliqué dans la question. Et je ne suis pas sûr de ce que vous entendez par "en tant que composant, en tant que HTML".
@alpay En react vous ne pouvez pas atteindre les composants avec document.getElementById, il y a ref in react à cet effet, vous devriez lire refs
@Seaky Vous devriez éviter d'utiliser jQuery avec react.js. Les références sont conçues spécifiquement pour atteindre DOM. Mais si vous donnez un identifiant à un élément spécifique, vous pouvez l'atteindre en tant qu'objet dom (
Vous ne pouvez pas passer id / class à un composant React comme vous le feriez dans votre HTML normal. toute propriété transmise à un composant React devient un accessoire de ce composant que vous devez utiliser dans la classe / fonction du composant.
render() {
const {visible, message} = this.state
// give your id props to div tag as id attr
return <div id={this.props.id}>
{message}
</div>
}
Cette réponse ne fournit pas la réponse exacte sur la sélection d'un composant comme vous le souhaitez. Je fournis cette réponse pour que vous puissiez voir d'autres alternatives (plus de manière React peut-être) et l'améliorer en fonction de vos besoins.
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root" />
class App extends React.Component {
state = {
isNotiVisible: false
};
handleClick = () => this.setState({ isNotiVisible: true });
render() {
return (
<div>
<button onClick={this.handleClick}>Show Noti</button>
{this.state.isNotiVisible && (
<Noti duration={2000} message="This is a simple notification." />
)}
</div>
);
}
}
class Noti extends React.Component {
state = {
visible: true
};
componentDidMount() {
setTimeout(() => this.setState({ visible: false }), this.props.duration);
}
render() {
return this.state.visible && <div>{this.props.message}</div>;
}
}
ReactDOM.render(<App />, document.getElementById("root"));
Merci! Est-il possible d'encapsuler la notification? Comme appeler noti.show (message, durée) . Je veux qu'il soit utilisé aussi simple que alert () et le message ne doit pas être fixe.
Si je vous ai bien compris ce que vous voulez en disant que l'encapsulation est déjà faite dans mon exemple. Je décide quand je montre cette notification et je lui donne les accessoires nécessaires. N'est-ce pas ce que tu veux? Lorsque vous écrivez quelque chose en tant que composant dans React, vous devez l'utiliser comme tel. Donnez-lui des accessoires! Le message et la durée ne sont pas fixes comme vous pouvez le voir. N'utilisez pas votre composant comme component (quelque chose) faites-le comme
Donc, si je veux afficher une notification de «faute de frappe», affichez une notification de «succès». Comment cela est-il réalisé dans votre code? Il semble que j'ai besoin de deux Noti ?
Si vous souhaitez afficher deux notifications, oui, vous affichez deux Noti s. Le contexte étant différent ("faute de frappe", "succès", etc.), vous pouvez rendre autant de composants que vous le souhaitez. Sur votre chemin, n’avez-vous pas besoin d’appeler également deux noti ? En fait, cela est lié à la façon dont vous souhaitez créer et utiliser votre composant. Ceci est un exemple très, très simple (et comporte peut-être quelques défauts). Je voulais juste montrer comment vous devriez y penser de la manière React. En passant, vous pouvez rendre les messages dynamiques et les lier à des accessoires tels que "typo", "success", etc. puis rendre votre composant selon des messages prédéfinis.
Le message ne doit pas être prédéfini car je ne suis pas le seul à écrire ce projet. Utiliser plus de noti nécessite plus de logique pour contrôler la visibilité des notifications lors de l'appel de fonction est très simple car je n'ai besoin que de changer les paramètres que je passe.
Alors utilisez des accessoires? Il vous suffit donc de changer le support de message. Dans mon exemple, vous pouvez passer le message comme vous pouvez le voir. J'ai dit "prédéfini" parce que vous avez dit différents types tels que "faute de frappe" et "succès". Je pensais que tu voulais juste passer des accessoires comme ça. Je n'ai vraiment pas compris quelle est la différence entre noti.show (message, durée) et et vous pense que le second a besoin de plus de logique :)
J'ai codé en dur l'identifiant en «noti» dans la méthode de rendu. Vous pouvez également utiliser l'identifiant de prop dans le composant Notification. J'ai remodelé le composant afin que vous puissiez obtenir la fonctionnalité voulue via React.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
messageContent: 'placeholder'
}
}
setMessage = (data) => {
this.setState({messageContent : data});
}
render() {
return (
<div className="App">
<button id='butt' onClick= {() => this.setMessage('test')} />
<Notification message = {this.state.messageContent} />
</div>
);
}
}
class Notification extends React.Component {
render () {
const {message} = this.props;
return (
<div id='noti'>
{message}
</div>
)
}
}
Pouvez-vous vérifier votre console et coller les erreurs que vous obtenez ici?
@johnmikelridzz Je n'obtiens aucune erreur.
Je pense que vous devriez expliquer ce que vous voulez faire avec ce composant
Notification? Si vous êtes nouveau sur Frontend et que vous envisagez d'utiliser React, vous devriez penser à React. Faites-nous part de votre désir, afin que nous puissions vous donner de meilleures suggestions. N'essayez pas de choisir votre composant de cette manière. Mais si vous voulez vraiment faire cela, la réponse @Alireza Esfahani est vraiment utile pour vous.@devserkan Comme le nom de la classe l'indique, j'essaye de créer une simple notification. Et je peux simplement afficher cette notification en appelant
notifcation.show (message, durée).Je veux dire, quelle est votre intention de "sélectionner" ce composant? Encore une fois, vous devriez penser de manière React. Vous devez utiliser l'état, les accessoires et autres bonus que React vous offre. N'essayez pas de "sélectionner" un composant comme celui-ci. Voulez-vous afficher ce composant à un moment donné dans votre application? Ensuite, utilisez state et laissez votre composant changer d'état et rendu.
@devserkan Je ne suis pas sûr de ce que vous voulez dire. Je veux juste afficher une notification qui s'affiche pendant un moment puis disparaît et je veux que la notification puisse être utilisée n'importe où. Et faire de cette façon est la seule chose que je sais car je suis un débutant.
Ok, mais vous pouvez le faire de plusieurs manières. De quel type de notification s'agit-il également? Juste un modal par exemple? Ne dépendez pas tellement des classes (opinion personnelle). Parcourez simplement la documentation officielle si vous ne l'avez pas encore vue. Soyez à l'aise avec l'état, les accessoires et d'autres choses. Par exemple, je pourrais écrire ce composant de notification comme un composant fonctionnel et lui transmettre les accessoires pertinents, puis le rendre n'importe où, à tout moment quand je le veux.