반응으로 인해 발생하는 문제는 무엇입니까? 반응 문제 요약

이 글에서는 주로 react 적용에 대해 설명하고, 일부 문제의 원인도 요약합니다. 이제 이 글을 함께 살펴보겠습니다

React 프로젝트에서 발생한 문제:

1. 새 하위 구성 요소를 생성하고 상위 구성 요소에 삽입하면 하위 구성 요소가 렌더링됩니다. 결과는 하위 구성 요소의 렌더링 메서드 반환 결과가 아니라 하위 구성 요소의 이름을 딴 XML 태그입니다.

일반적인 상황에서 하위 구성 요소가 렌더링한 결과는 하위 구성 요소인 p 태그에 있는 렌더링 메서드의 반환 결과입니다.

문제 원인: React 컴포넌트의 명명 규칙, 첫 글자를 대문자로 써야 합니다.

React의 JSX 구문은 대문자와 소문자 규칙을 사용하여 로컬 구성 요소 클래스와 HTML 태그를 구별합니다. 하지만 두 가지 점에 주의하세요. JSX 구문에서 HTML 태그와 구성 요소 태그의 클래스 및 for 속성은 해당 속성으로 className 및 htmlFor를 사용해야 합니다.

2. React로 구축된 애플리케이션의 경우 입력 요소 및 텍스트 영역 요소 의 값을 ​​ 가져오는 방법 및 의 속성(값)에서 업데이트하는 방법 실시간으로 요소를 확인할 수 있습니다.

HTML 페이지와 같은 처리를 하지 않는다면 이 두 요소에 데이터를 쓴 후 $(input).val() 또는 this.refs.input01.value 두 가지 방법을 사용하세요. (가져오기) 데이터, 결과는 비어 있습니다.

input 요소와 textarea 요소는 육안으로 볼 수 있지만, 반응하는 요소 속성(값)은 실시간으로 업데이트되지 않기 때문에 업데이트가 필요합니다. 입력 요소 및 텍스트 영역 요소는 특별하게 처리됩니다. 다음과 같습니다:

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

onChange 이벤트를 요소에 바인딩한 다음 event.target.value 메서드를 통해 값을 가져와야 합니다. 그런 다음 구성 요소 상태를 업데이트합니다. 구성 요소 상태가 변경되면 구성 요소는 value={this.state.email}을 통해 값 속성을 업데이트하고 렌더링 메서드를 호출합니다. 얻을 수 있습니다.

this.state.email || #$(input).val() || this.refs.input.value, 데이터를 얻는 데에는 차이가 없지만 데이터를 쓰는 데에는 차이가 있습니다. #🎜 🎜##🎜🎜 # 보이지 않는 데이터를 작성하려면

this.refs.input.value="sometext" 또는

$(input).val을 사용할 수 있습니다. ( "sometext"), refs 속성을 통해 요소를 조작하고, 렌더링 메서드를 호출하지 않으며, 페이지를 다시 렌더링하지 마세요. #🎜 🎜## 🎜🎜# 표시되는 데이터 쓰기는 반응의 상태 속성에 의해 제어되어야 합니다:

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

#🎜 🎜#3. 페이지를 작성한 후 결과가 없는 빈 페이지를 렌더링합니다.

문제 원인: 컴포넌트의 render 메서드 반환 값에 대한 코딩 사양이 return 키워드와 같은 줄에 있어야 합니다. 왼쪽 p 또는 왼쪽 대괄호. (관련 질문: 또 다른 질문에서 한 번 오류가 보고되었습니다. 공식 홈페이지에서는 재실행 반환 값이 중괄호 {}로 묶인 변수가 될 수 없다고 설명하고 있습니다. 인코딩 사양은 가장 바깥쪽 레이어는 반드시 XML 태그여야 하며, )

4. 상위 구성요소에서 하위 구성요소로 매개변수 전달

#🎜🎜 # 시나리오 1: 상위 구성 요소 A는 하위 구성 요소 B에 전달해야 합니다. 매개 변수 전달

상위 구성 요소가 하위 구성 요소 B를 호출할 때 전달해야 할 매개 변수를 추가합니다. 요소는 동시에 this.props.isdisplay

#과 같은 이름으로 속성을 선언하고 초기화합니다. 🎜🎜# 컴포넌트 B의 props 속성에 있습니다. 하위 컴포넌트 B 자체는 많은 props 속성을 캡슐화(노출)합니다. 상위 컴포넌트 A가 B를 호출하면 데이터가 해당 props 속성에 직접 전달될 수 있습니다.

시나리오 2: 상위 구성 요소 A는 손자 구성 요소 C에 매개 변수를 전달해야 하며 중간에 하위 구성 요소 B가 있고 B는 구성 요소를 호출합니다. ㄷ

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. 구성 요소 상태 변수 개수 제어: 정의된 상태의 연산으로 얻은 값은 더 이상 상태 변수로 정의할 수 없습니다. 더 궁금한 사항이 있으시면 아래에 메시지를 남겨주세요.

위 내용은 반응으로 인해 발생하는 문제는 무엇입니까? 반응 문제 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!