Auf welche Probleme stößt React? Zusammenfassung der Reaktionsprobleme

In diesem Artikel geht es hauptsächlich um die Anwendung von react und fasst auch die Ursachen einiger Probleme zusammen. Werfen wir nun einen Blick auf diesen Artikel

Im React-Projekt aufgetretene Probleme:

1 . Erstellen Sie eine neue Unterkomponente und fügen Sie sie in die übergeordnete Komponente ein. Das von der Unterkomponente gerenderte Ergebnis ist ein nach der Unterkomponente benanntes XML-Tag, nicht das Rückgabeergebnis der Rendermethode in der Unterkomponente.

Unter normalen Umständen ist das von der -Unterkomponente gerenderte Ergebnis das Rückgabeergebnis der Rendermethode in der Unterkomponente, bei der es sich um das p-Tag handelt.

Ursache des Problems: Bei den Benennungsregeln für Reaktionskomponenten muss der erste Buchstabe großgeschrieben werden.

Die JSX-Syntax von React verwendet Groß- und Kleinschreibungskonventionen, um lokale Komponentenklassen und HTML-Tags zu unterscheiden. Beachten Sie jedoch zwei Punkte: In der JSX-Syntax müssen die Klassen- und for-Attribute von HTML-Tags und Komponenten-Tags className und htmlFor als entsprechende Attribute verwenden.

2. Anwendung erstellt mit React, dem Wert des Eingabeelements und des Textarea-Elements Wie man es erhält und wie man es in Echtzeit auf das Attribut (den Wert) des Elements aktualisiert.

Wenn keine Verarbeitung wie bei einer HTML-Seite erfolgt, schreiben Sie Daten in diese beiden Elemente und übergeben Sie dann

$(input).val(); oder this.refs.input01.value; Zwei Methoden zum Lesen (Abrufen) von Daten, das Ergebnis ist leer.

Weil das bloße Auge das Eingabeelement und den Textbereich ElementDer Inhalt wurde eingegeben, aber die Elementattribute (Wert) in React werden nicht in Echtzeit aktualisiert. Für das Eingabeelement und den Textbereich Elemente. Wie folgt:

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

Sie müssen das onChange-Ereignis an das Element binden, dann den Wert über die Methode event.target.value abrufen und dann den Komponentenstatus aktualisieren. Wenn sich der Komponentenstatus ändert, wird die Komponente erneut gerendert und ruft die Rendermethode auf. Das Element aktualisiert das Wertattribut über value={this.state.email}, um die Daten abzurufen.

this.state.email || $(input).val() || this.refs.input.value, es gibt keinen Unterschied beim Abrufen von Daten, aber es gibt einen Unterschied beim Schreiben von Daten:

Sie können unsichtbare Daten schreiben Verwenden Sie this .refs.input.value="sometext", oder $(input).val("sometext"), betreibt Elemente Rufen Sie die Render-Methode nicht über das Refs-Attribut auf, ohne die Seite erneut zu rendern.

Das Schreiben sichtbarer Daten muss durch das Statusattribut von „React“ gesteuert werden:

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

3. Nach dem Schreiben einer Seite wird eine leere Seite ohne Ergebnisse gerendert.

Ursache des Problems: Die Codierungsspezifikation für den Rückgabewert der Rendermethode in der Komponente. Es muss Code in derselben Zeile des Rückgabeschlüsselworts vorhanden sein, entweder ein linkes p oder eine linke Klammer. (Verwandte Frage: Bei einer anderen Frage wurde einmal ein Fehler gemeldet. Auf der offiziellen Website wird erklärt, dass der Rückgabewert für die erneute Ausführung keine in geschweifte Klammern {} eingeschlossene Variable sein darf. Die Codierungsspezifikation besagt, dass die äußerste Ebene ein XML-Tag sein muss, und das kann nur so sein 1. Es dürfen keine Geschwister-XML-Tags vorhanden sein um Parameter an die untergeordnete Komponente B zu übergeben

Wenn die übergeordnete Komponente die Unterkomponente B aufruft, fügen Sie die Parameter hinzu, die an die <. übergeben werden müssen ;/b> Deklarieren und initialisieren Sie gleichzeitig die Eigenschaft mit dem gleichen Namen this.props.isdisplay

Unterkomponente B selbst kapselt (macht) viele Props-Attribute verfügbar Komponente A ruft B auf und kann die entsprechenden Requisitenattribute direkt zu eingehenden Daten hinzufügen.

Szenario 2: Übergeordnete Komponente A muss Parameter an Enkelkomponente C übergeben, in der Mitte befindet sich Unterkomponente B und B ruft Komponente C auf

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. Steuerung der Anzahl der Komponentenzustandsvariablen: Der durch die Operation des definierten Zustands erhaltene Wert kann nicht als Zustandsvariable definiert werden

Dieser Artikel endet hier (wenn Sie mehr sehen möchten, gehen Sie zur Spalte React User Manual auf der chinesischen PHP-Website, um mehr zu erfahren). Wenn Sie Fragen haben, können Sie diese unten stellen. Hinterlassen Sie eine Nachricht mit einer Frage.

Das obige ist der detaillierte Inhalt vonAuf welche Probleme stößt React? Zusammenfassung der Reaktionsprobleme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!