在React中如何使用复合组件中的方法?
2016-11-16 16:59
771 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/react.js"></script> <script src="../js/react-dom.js"></script> <script src="../js/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var MainComponent=React.createClass({ handleOnClick:function () { console.log('这是复合组件的中的click方法'); }, render:function () { return <div> <h1>复合组件</h1> <ButtonComponent funName={this.handleOnClick}/> </div> } }) var ButtonComponent=React.createClass({ /*handleClick:function () { // console.log('this is a test'); this.props.funName(); },*/ render:function () { return <button onClick={this.props.funName}>click me</button> } }) ReactDOM.render( <MainComponent/>, document.getElementById('example') ); </script> </body> </html>
上面是自己写的一个例子,可以使用props这个方法,访问到复合组件中定的方法。
相关文章推荐
- react开发中如何使用require.ensure加载es6风格的组件
- 如何“正确”编写React组件?我们总结了一套满意的方法
- Android中使用react-native框架中的View组件如何使其中的文本换行
- React反模式 —— 如何不使用JSX地动态显示组件
- 详解如何在React组件“外”使用父组件的Props
- react 兄弟组件如何调用对方的方法示例
- react-redux高阶组件connect方法使用介绍以及实现原理
- react开发中如何使用require.ensure加载es6风格的组件
- 使用store来优化React组件的方法
- 如何使用基于组件的设计方法
- 如何在cocos2d-x中使用ECS(实体-组件-系统)架构方法开发一个游戏?
- 如何恰当地使用 React 生命周期方法
- vue如何在一个组件中引用另外一个组件并使用?有两种方法
- React实践之Tree组件的使用方法
- react路由的使用方法以及通过路由如何传参传递私有属性--【基于最新版本的react-router-dom(4.2.2)】
- react 纯函数组件中使用ref属性方法
- react---react router4.0路由中如何异步动态加载组件,webpack使用require.ensure()生成异步chunk
- react-native组件中NavigatorIOS和ListView结合使用的方法
- react vr 组件之LiveEnvCamera的使用方法
- 在react中如何使用tab组件-小白系列 es6