React.js refs 和props传递数据

JAVA_Drious

于 2017-07-31 17:24:25 发布

阅读量1k

点赞数

分类专栏： JS 文章标签：通信数据函数

本文链接：https://blog.youkuaiyun.com/MrJavaweb/article/details/76457784

版权

JS 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何在React.js中通过props传递数据以及使用refs调用子组件的方法。示例展示了一个父组件如何点击按钮触发子组件HelloMessage的方法，并通过props将名称变量name传递给子组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React from 'react';
import { Button} from 'antd';

///子组件
var HelloMessage = React.createClass({
  childMethod: function(){
    alert("组件之间通信成功");
  },
  render: function() {
    return <div> <h1>Hello {this.props.name}</h1> <Button onClick={this.childMethod}>子组件</Button></div>
  }
});

//父组件
var ImDaddyComponent = React.createClass({
  getDS: function(){
    //调用组件进行通信
    this.refs.getButton.childMethod();
  },
  render: function(){
    return (
      <div>
        <HelloMessage name="John" ref="getButton" />
        <Button onClick={this.getDS}>父组件</Button>
      </div>
    );
  }
});

export default class Home extends React.Component {
  render() {
    return (
      <ImDaddyComponent/>
    );
  }
}

点击父组件按钮可以调用到子组件的方法，

<HelloMessage name="John" ref="getButton" />

通过{this.props.name}，name被传递到了HelloMessage上

运行结果：
这里写图片描述