Prevent event bubbling in react
Look directly at the chestnuts:
Three div s on the page, as shown in the figure 1. When the native event registration is not involved and only react event is involved, e.stopPropagation() is used to prevent bubbling. The code is as follows:
import React, { Component } from 'react';
import './App.css';
class App extends Com ...
Posted by robos99 on Thu, 02 Jan 2020 14:25:43 -0800
Understanding React(4): ref attribute
The ref attribute is actually used to get DOM nodes, for example:
import React from 'react'
class RefComponent extends React.Component {
componentDidMount(){
this.inputNode.focus();
}
render() {
return (
<div>
<h1>ref attribute</h1>
<input type="text" ref={nod ...
Posted by texelate on Tue, 31 Dec 2019 20:42:57 -0800
RN + head navigation bar + pull-up refresh pull-down load + list + details
-
1. * create head navigation bar
*
import React from "react";
import { createTabNavigator } from "react-navigation";
import List from "./List";
//Add a reuse
const Good = () => {
return <List />;
};
const Share = () => {
return <List />;
};
const Ask = () => {
return <List />;
};
const Jo ...
Posted by fahhem on Tue, 31 Dec 2019 09:19:36 -0800
refs in React
Create ref
Use React.createRef() to create refs and get the React element through the ref attribute.
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <div ref={this.myRef} />;
}
}
Visit Refs
When a ref attribute is pa ...
Posted by millwardt on Sun, 29 Dec 2019 08:38:08 -0800
Android native of React Native sends messages to js through deviceeventtwitter
1 problem
Android sends messages to js natively and can carry data
2 implementation principle
Android native can use RCTEventEmitter to register events, then you need to specify the name of the event here, and then listen to the name of the same event on the js side, and you can receive the message and get the data
...
Posted by timclaason on Sat, 28 Dec 2019 08:13:27 -0800
Record the operation of an array once
The common methods to operate arrays are forEach, map and filter. The return values of map and filter methods are arrays, and the return values of forEach are undefined, which can be understood as no return value.
There is no concatAll method in the native array object, so I plan to implement one myself. What the concatAll metho ...
Posted by StealthRider on Thu, 26 Dec 2019 11:39:20 -0800
CSS drawing parallelogram
There are three methods:
(1) , parent element transform: skewX(-45deg); child element transform: skewX(45deg);
Rendering 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Com ...
Posted by Muncey on Tue, 24 Dec 2019 08:19:58 -0800
Simply teach you the value transfer between the parent and child components
National Day charging feature:
Traffic jams, no more nonsense and serve directly.
1. Pass values from parent component to child component by using props attribute
class Component extends React.Component {
constructor (props) {
super(props);
}
render() {
return (
<div>
<h1& ...
Posted by dflow on Sat, 21 Dec 2019 08:40:46 -0800
Seven methods of conditional rendering in React
Original address: https://scotch.io/tutorials/7-ways-to-implement-conditional-rendering-in-react-applications
With React, we can build dynamic and highly interactive single-page applications, and one way to take full advantage of this interaction is through conditional rendering.
Catalog
Challenge
Solution
Use if...else statement
Using el ...
Posted by jcarver on Thu, 19 Dec 2019 20:59:41 -0800
[The Way of Xiuxian] Golden Dan by React-Redux
Author: Shui TaoPursue technology, but not lose the fun of life, live the life you want
Introduction to React-Redux
React-Redux enables your React project to have global data, allows multiple React components to read global data, and allows them to modify it.
React-Redux can be interpreted as Vuex in a Vue, but it is also a global state ...
Posted by IanMartins on Thu, 19 Dec 2019 18:43:27 -0800