Quels sont les problèmes rencontrés par React ? Résumé des problèmes de réaction

Cet article parle principalement de l'application de react, et résume également les causes de certains problèmes. Jetons maintenant un œil à cet article

Problèmes rencontrés dans le projet React :

1 . Créez un nouveau sous-composant et insérez-le dans le composant parent. Le résultat rendu par le sous-composant est une balise XML nommée d'après le sous-composant, et non le résultat renvoyé par la méthode de rendu dans le sous-composant.

Dans des circonstances normales, le résultat rendu par le sous-composant est le résultat de retour de la méthode de rendu dans le sous-composant, qui est la balise p.

Cause du problème : Les règles de dénomination des composants de réaction, la première lettre doit être en majuscule.

La syntaxe JSX de React utilise des conventions majuscules et minuscules pour distinguer les classes de composants locaux et les balises HTML. Mais faites attention à deux points : dans la syntaxe JSX, les attributs class et for des balises HTML et des balises de composant doivent utiliser className et htmlFor comme attributs correspondants.

2. Application construite avec React, la valeur de l'élément d'entrée et de l'élément textarea Comment l'obtenir et comment le mettre à jour avec l'attribut (valeur) de l'élément en temps réel.

Si aucun traitement n'est effectué comme une page HTML, écrivez des données dans ces deux éléments, puis transmettez $(input).val(); >this.refs.input01.value ; Deux méthodes pour lire (obtenir) des données, le résultat est vide.

Parce que l'œil nu peut voir l'élément d'entrée et la zone de texte elementLe contenu a été saisi, mais les attributs de l'élément (valeur) dans React ne sont pas mis à jour en temps réel. Un traitement spécial est requis pour l'élément d'entrée et la zone de texte<.> éléments. Comme suit :

     <input value={this.state.email} onChange={this.emailChange.bind(this)} type="email" maxLength="20"/>
        emailChange(event){                this.setState({email: event.target.value})        }

Vous devez lier l'événement onChange sur l'élément, puis obtenir la valeur via la méthode event.target.value, puis mettre à jour le composant state, état du composant S'il est modifié, le composant restituera et appellera la méthode de rendu. L'élément mettra à jour l'attribut value via value={this.state.email} pour obtenir les données.

this.state.email || this.refs.input.value, il n'y a pas de différence dans l'obtention des données, mais il y a une différence dans l'écriture des données :

Pour écrire des données invisibles, vous pouvez utilisez this .refs.input.value="sometext", ou, $(input).val("sometext"), exploite les éléments via l'attribut refs, not Appelez la méthode render sans restituer la page

L'écriture des données visibles doit être contrôlée par l'attribut state de réagir :

<input value={this.state.email}/>
    this.setState({email: event.target.value})

3. Après avoir écrit une page, une page vide est rendue sans aucun résultat.

Cause du problème : La spécification de codage pour la valeur de retour de la méthode de rendu dans le composant. Il doit y avoir du code sur la même ligne du mot-clé return, soit un p gauche, soit un p gauche. une parenthèse gauche. (Question connexe : une autre question a signalé une erreur une fois. Le site officiel explique que la valeur de retour de la réexécution ne peut pas être une variable entourée d'accolades {}. La spécification d'encodage est que la couche la plus externe doit être une balise XML, et il ne peut y avoir one. Il ne peut pas y avoir de balises XML frères. )

4. Transmission de paramètres entre les composants parent et enfant

Scénario 1 : le composant parent A a besoin. pour transmettre des paramètres au composant enfant B

Lorsque le composant parent appelle le sous-composant B, ajoutez les paramètres qui doivent être transmis sur le < ;/b> En même temps, déclarez et initialisez la propriété du même nom this.props.isdisplay

Le sous-composant B lui-même encapsule (expose) de nombreux attributs d'accessoires. Lorsque le composant parent A appelle B, il peut ajouter directement les attributs props correspondants aux données entrantes.

Scénario 2 : Le composant parent A doit transmettre des paramètres au composant petit-fils C, il y a un composant enfant B au milieu et B appelle le composant C

A调用C的时候，需要传入属性isdisplay，此时需要在B组件的props属性中声明并初始化isdisplay属性，同时在B组件调用C组件时，在C组件的属性中传入isdisplay属性。

5、写好一个组件页面，浏览器没有渲染出任何结果，显示空白页面。

问题原因：react的render方法语法格式错误

render(){}方法中的return返回内容格式要求，和return同一行必须有内容，并且返回的标签元素最外层只能有一个元素，形如：

return (
<p>...</p>
)
retuern <p>
...
</p>

6、组件的setState方法，传入参数详解，什么时候需要用回调函数？

this.setStete({},()=>{});//组件状态量，回调函数

如下情况，由于setStete方法是异步执行，所以直接在setStete方法后取重置的state状态量，有可能取到的是重置之前的值，因此需要用到回调函数，保证了state状态量重置成功后再取值，肯定取到的是重置后的值。（想看更多就到PHP中文网React参考手册栏目中学习）

this.setState({    pageNum: this.state.pageNum + 1});
console.log(pageNum);//pageNum || pageNum + 1

改造如下：

this.setState({
pageNum: this.state.pageNum + 1
},()=>{
console.log(
pageNum
);
});

总结：回调函数存在的功能，异步方法执行成功后再执行回调函数内容，即“异步方法同步化”。

7、组件状态量的初始化两种方法：

ES6语法中，可以在constructor方法中初始化，如下：

constructor(super){
    props(super);
    this.state({
        name: "nickname",
    });
}

react原生语法如下：

getInitialState() {    return {
        name: "nickname",
    };}

8、react组件的结构与数据和逻辑无关

    选用react框架搭建的web应用，最高效的事情就是，组件可以一次封装，多次调用，也就是说开发的所有组件都是可复用高复用度组件。

    因此，需要理清一个思路，数据与逻辑和组件结构无关，对于具体需求的页面，可以用多个组件拼装而成，每个组件没有具体的数据和逻辑，页面的数据和逻辑在所有组件布局成功之后再添加。

9、对于list页面的路由配置

    场景：比如员工信息列表，每一项对应一个人的详情页面，详情页面的布局完全相同

    这种情况下需要用到react-router的路由参数功能，在路由配置的时候，增加一条参数配置

path: 'employee'//列表页路由配置
path: 'detail/:employeeId'//详情页路由配置，path 属性中的 :employeeId就是该路由的参数params

employeeId}>//列表每项跳转路径
this.props.params.employeeId;//详情页路由具体实现，React Router 将路由的数据都通过 props传递给了页面组件，从而可以访问路由相关数据了。

10、遇到Maximum call stack size exceeded栈溢出问题总结

    案例一：语法逻辑错误

11. Contrôle du nombre de variables d'état des composants : La valeur obtenue par le fonctionnement de l'état défini ne peut pas être définie comme variable d'état

Cet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois React User Manual pour en savoir plus). questions, vous pouvez les poser ci-dessous Laisser un message avec une question.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!