What are the problems encountered by react? Summary of react problems

This article mainly talks about the application of react, and also summarizes the causes of some problems. Now let us take a look at this article

Problems encountered in the react project:

1. Create a new subcomponent and insert it into the parent component. The result rendered by the subcomponent is an XML tag named after the subcomponent, not the return result of the render method in the subcomponent.

Under normal circumstances, the result rendered by the subcomponent is the return result of the render method in the subcomponent, which is the p tag.

Cause of the problem: The naming rules of react components, the first letter must be capitalized.

React’s JSX syntax uses uppercase and lowercase conventions to distinguish local component classes and HTML tags. But pay attention to two points: In JSX syntax, the class and for attributes of HTML tags and component tags must use className and htmlFor as the corresponding attributes.

2. Application built with react, the values ​​of input element and textarea element How to get it and how to update it to the attribute (value) of the element in real time.

If no processing is done like the HTML page, write data to these two elements, and then pass $(input).val(); or this.refs.input01.value;Two methods to read (get) data, the result is empty.

## Because the naked eye can see input element and textareaelementThe content has been typed, but the element attributes (value) in react are not updated in real time. Special processing is required for the input elements and textarea elements. as follows:

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

You need to bind the onChange event on the element, then get the value through the event.target.value method, and then update the component state. When the component state changes, The component will re-render and call the render method. The element will update the value attribute through value={this.state.email} to get the data.

##this.state.email || $(input).val() || this.refs.input.value, there is no difference in getting data, but there is a difference in writing data:

To write invisible data, you can use this .refs.input.value="sometext", or, $(input).val("sometext"), Manipulate elements through the refs attribute, not Call the render method without re-rendering the page;

Writing visible data must be controlled by the state attribute of react:

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

3. After writing a page, an empty page is rendered without any results.

Cause of the problem: The coding specification for the return value of the render method in the component. There must be code on the same line of the return keyword, either a left p or a left parenthesis. (Related question: Another question reported an error once. The official website explains that the rerun return value cannot be a variable surrounded by curly braces {}. The encoding specification is that the outermost layer must be an XML tag, and there can only be one. There cannot be sibling XML tags. )

4. Passing parameters from parent to child components

Scenario 1: Parent component A needs to pass parameters to child component B

When the parent component calls sub-component B, add the parameters that need to be passed on the element. At the same time, declare and Initialize the property this.props.isdisplay with the same name Incoming data.

Scenario 2: Parent component A needs to pass parameters to grandchild component C. There is sub-component B in the middle, and B calls component 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. Control of the number of component state variables: The value obtained by the operation of the defined state cannot be defined as a state variable again

This article ends here (if you want to see more, go to the PHP Chinese website React User Manual column to learn). If you have any questions, you can leave them below Leave a message with a question.

The above is the detailed content of What are the problems encountered by react? Summary of react problems. For more information, please follow other related articles on the PHP Chinese website!