React 组件可否像DOM那样遍历取值

遍历组件需要一个前提，就是你的组件都是通过map渲染出来的。

1、你有一个专门存储当前页面下组件各个配置参数的数据结构，通常是一个数组；

var components = [

{coms_1},

{coms_2},

{coms_3},

]

2、定义一个function用来渲染你的组件，在函数内部写一个map将组件的数据结构传入函数，用switch判断组件的类型，然后每个类型渲染对应的组件，也就是你贴出来的那些组件代码，把参数传入组件。

yourComponents(components) {

var coms = componentsmap((result) => {

switch (resulttype) {

case "type1":

return <Com1 ref={resultid} {others} />

}

})

thiscoms = coms

return coms

}

3、需要注意的一点是这些组件需要传入一个组件id，因为你后面要map这些组件。

4、调用方式通过thisrefscomId。

组件本身即上面两种 React 组件构建方法中的 render 方法。

我们可以通过thispropsxx的形式获取组件对象的属性，对象的属性可以任意定义，但要避免与JavaScript关键字冲突。

组件可以定义初始值，自己不可更改props属性值，只允许从父组件中传递过来：

父组件向子组件传递name="name"的props属性，在子组件中使用thispropsname引用此属性。

属性类型prop type和默认属性 default prop可以通过类中的 static来声明：

组件用来改变自己状态的属性，通常使用setState({key:value})来改变属性值触发界面刷新，不能使用thisstatexxx来直接改变。 典型的场景是在接收到服务器返回的新数据，或者在用户输入数据之后。

对于经常改变的数据且需要刷新界面显示，可以使用state。

对于不需要改变的属性值可以使用props。

React 最大的特色是当View层在渲染的时候,它不会直接从模板里面去构建一个DOM节点 首先, 它创建一些暂时的, 虚拟的 DOM, 然后和真实的DOM还有创建的Diffs一起做对比, 然后才决定需不需要渲染。

生命周期：广义上 => 各种客观事物的阶段性变化及其规律。生命体的周期是单一，不可逆，而软件开发的生命周期会根据方法的不同在完成前重新开始。

初始化阶段可以使用的函数：

getDefaultProps : 只调用一次，实例之间共享引用

getInitialState : 初始化每个实例特有的状态

componentWillMount : render之前最后一次修改状态的机会。如果在这个方法内调用setState,render()将会感知到更新后的state，将会执行仅一次，尽管state改变了。

render : 只能访问thisprops和thisstate，只有一个顶层组件，不允许修改状态和DOM输出

componentDidMount : 成功render并渲染完成真实DOM之后触发，可以修改DOM

调用顺序

当组件在客户端被实例化，第一次被创建时，以下方法依次被调用：

react-redux 库提供了一个组件和一个 API 帮助 Redux 和 React 进行绑定，

一个是 React 组件 <Provider/> ，一个是 connect()。

<Provider/> 接受一个 store 作为props，它是整个 Redux 应用的顶层组件，

connect() 提供了在整个 React 应用的任意组件中获取 store 中数据的功能。

它们一个将组件与redux关联起来，一个将store传给组件。组件通过dispatch发出action，store根据action的type属性调用对应的reducer并传入state和这个action，reducer对state进行处理并返回一个新的state放入store，connect监听到store发生变化，调用setState更新组件。

流程：

一、Provider组件接受redux的store作为props，然后通过context往下传。

二、connect函数收到Provider传出的store，然后接受三个参数mapStateToProps，mapDispatchToProps和组件，并将state和actionCreator以props传入组件，这时组件就可以调用actionCreator函数来触发reducer函数返回新的state，connect监听到state变化调用setState更新组件并将新的state传入组件。

connect(state => state, action)(Component);

DOM结构：

<View style={stylescheckContainer}  ref='checkContainer' onLayout={({nativeEvent:e})=>thislayout(e)}> 

</View>

对应js方法：

layout=(e)=>{

      consolewarn(elayouty)  ;

      var UIManager = require('UIManager');

      consolewarn(etarget);

      UIManagermeasure(etarget, (x, y, width, height, left, top) => {

     consolewarn('x:'+x)

     consolewarn('y:'+y)

     consolewarn('width:'+width)

     consolewarn('height:'+height)

     consolewarn('left:'+left)

     consolewarn('top:'+top)

})

}

注意：View组件的onLayout（可以得到宽高和相对位置）配合UIManagermeasure（可以得到宽高和绝对位置）一起使用

附加知识点：

得到某一dom元素的节点值：

import {findNodeHandle} from 'react-native';

var nodeData = findNodeHandle(thisrefsname);

nodeData即为节点值

1首先我们要在父组件中定义一个空数组setlinksparam[] 这个数据就是用来接受我们动态生成DOM 所需的数据 这个数据是根据具体需要来定义 我这里就是获得数值来填充动态DOM 内容和属性

2我们还有定义一个方法 来接受数据 然后重新渲染DOM 这样我们才能看到我们动态的DOM 这里我们就用到了上面我们所说的 thissetState()方法，

createPortal 的调用方式是：

第一个参数是一个 renderable React child

第二个参数是一个DOM元素

将indexhtml页面添加DOM节点来验证createPortal如何渲染

大白话的意思是：

通过createPortal渲染的元素会被添加到另外的节点，同时点击事件会被触发；

而通过ReactDOMrender渲染的元素添加到新节点，但是点击事件没有触发。

以上就是关于React 组件可否像DOM那样遍历取值全部的内容，包括:React 组件可否像DOM那样遍历取值、React分享、react-native 获取某一元素的绝对位置（相对于屏幕左上角）等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！