react 子组件获取变量属性值

刚刚遇到一个问题：子组件属性值绑定了变量，但是在子组件的componentDidMoiunt中拿到的值始终是undefinded。如下：

1                         <PieInfo
2                           title='有效病案'
3                           num={yxba}
4                           tcolor='#DC5654'
5                           pieId='useful'
6                           source={cqsj}
7                         />

后来在网上搜索才发现，

react组件属性值是直接值（写死）的时候，因为父组件的值不是异步的，我们能直接在该组件的生命周期中获取,如下：

　　　　　　　　　　　　　　<PieInfo title='DRG数组'num='108'pieId='DRG'source='804’data='506'/>

当组件属性绑定的是变量时，需要在componentWillRecieveProps中才能获取到。如下：

                        <PieInfo title='入组病案'num={rzba}pieId='into'source={cqsj}data={rzba}/>

    componentWillReceiveProps(nextprops) {const { pieId, source, data } = nextprops;}

PS：生命周期定义：

componentDidMount(){}

调用一次，只在客户端（不在服务器上），在初始渲染发生后立即子组件的componentDidMount（）方法在父组件的componentDidMount（）方法之前被调用 setTimeout setInterval AJAX 在此之行，强烈建议

componentWillReceiveProps(nextProps){}

在组件接收新props时调用。初始渲染不调用此方法。老的props可以用this.props 新值就用nextProps查看在此函数中调用this.setState（）不会触发附加的渲染。

转载于:https://www.cnblogs.com/thhj-IT/p/10826544.html

react 子组件获取变量属性值相关推荐

vue父组件异步获取动态数据传递给子组件获取不到值
原理: 在父组件中使用axios获取异步数据传给子组件,但是发现子组件在渲染的时候并没有数据,在created里面打印也是空的,结果发现一开始子组件绑定的数据是空的,在请求数据没有返回数据时,子组件就 ...
vue 父组件传子组件数值，父值变更子获取的值没有变的问题
1.父组件给子组件传值,子组件使用props接收值. //父组件 <div><Treeselect :value="editFormData.customerId" ...
java高效获取内部类属性值_Java高级特性：内部类
内部类是什么内部类是指在一个外部类的内部再定义一个类.内部类作为外部类的一个成员,并且依附于外部类而存在的.内部类可为静态,可用protected和private修饰(而外部类只能使用public和 ...
php xml获取标签属性,php获取xml属性值
php获取xml属性值 $dom = new DOMDocument(); if (!$dom->load('attr.xml')) { echo "load books.xml fa ...
组件间数据交互||父组件向子组件传值-基本使用|| 父组件向子组件传值-props属性名规则
组件间数据交互父组件向子组件传值 1. 组件内部通过props接收传递过来的值 2. 父组件通过属性将值传递给子组件父组件向子组件传值-基本使用 <!DOCTYPE html> < ...
关于Java反射获取静态属性值的方式
先随意创建一个用户类: /*** @author 晚风* @since 2022/3/14 11:31*/ public class User {private String name;public ...
react 子组件componentDidMount只执行一遍
react 子组件componentDidMount只执行一遍的解决方法用key值:
xpath获取标签属性值
html <a href='www.some.com'><span>hello </span>world</a> #获取a标签下的文本 xpath(&q ...
无障碍开发（五）之设置获取无障碍属性值
设置获取无障碍属性值为了跨浏览器兼容,总是使用WAI-ARIA属性解析来访问和修改ARIA属性,例如object.setAttribute("aria-valuenow", ne ...

react 子组件获取变量属性值

react 子组件获取变量属性值相关推荐

最新文章

热门文章