> 博客详情
摘要: 刚入门React可能会因为React的单向数据流的特性而遇到组件间沟通的麻烦，这篇文章主要就说一说如何解决组件间沟通的问题。
1.组件间的关系
1.1 父子组件
ReactJS中数据的流动是单向的，父组件的数据可以通过设置子组件的props传递数据给子组件。如果想让子组件改变父组件的数据，可以在父组件中传一个callback(回调函数)给子组件，子组件内调用这个callback即可改变父组件的数据。
var MyContainer = React.createClass({ getInitialState: function(){ return { list: ['item1', 'item2'], curItem: 'item1' } }, // 改变curItem的回调函数 changeItem: function(item){ this.setState({ curItem: item }); }, render: function(){ return ( &div& The curItem is: {this.state.curItem} &List list={this.state.list} changeItem={this.changeItem}/& &/div& ) } }); var List = React.createClass({ onClickItem: function(item){ this.props.changeItem(item); }, render: function(){ return ( &ul& { (function(){ var self = return this.props.list.map(function(item){ return ( &li onClick={self.onClickItem.bind(self, item)}&I am {item}, click me!&/li& ) }); }.bind(this))() } &/ul& ) } }) ReactDOM.render( &MyContainer /&, document.getElementById('example') );
&MyContainer /&是&List /&的父组件，&MyContainer /&通过props传递list数据给&List /&组件，如果&MyContainer /&中的list改变，&List /&会重新渲染列表数据。而&List /&可以通过&MyContainer /&传来的changeItem函数，改变&MyContainer /&的curItem数据。
1.2&兄弟组件
当两个组件不是父子关系，但有相同的父组件时，将这两个组件称为兄弟组件。兄弟组件不能直接相互传送数据，此时可以将数据挂载在父组件中，由两个组件共享：如果组件需要数据渲染，则由父组件通过props传递给该组件；如果组件需要改变数据，则父组件传递一个改变数据的回调函数给该组件，并在对应事件中调用。
var MyContainer = React.createClass({
getInitialState: function(){
list: ['item1', 'item2'],
curItem: 'item1'
// 改变curItem的回调函数
changeItem: function(item){
this.setState({
curItem: item
render: function(){
The curItem is: {this.state.curItem}
&List list={this.state.list} curItem={this.state.curItem} /&
&SelectionButtons changeItem={this.changeItem}/&
var List = React.createClass({
render: function(){
var selectedStyle = {
color: 'white',
background: 'red'
(function(){
var self =
return this.props.list.map(function(item){
var itemStyle = (item == self.props.curItem) ? selectedStyle : {};
&li style={itemStyle}&I am {item}!&/li&
}.bind(this))()
var SelectionButtons = React.createClass({
onClickItem: function(item){
this.props.changeItem(item);
render: function(){
&button onClick={this.onClickItem.bind(this, 'item1')}&item1&/button&
&button onClick={this.onClickItem.bind(this, 'item2')}&item2&/button&
ReactDOM.render(
&MyContainer /&,
document.getElementById('example')
如上述代码所示，共享数据curItem作为state放在父组件&MyContainer /&中，将回调函数changeItem传给&SelectionButtons /&用于改变curItem，将curItem传给&List /&用于高亮当前被选择的item。
2.&组件层次太深的噩梦
兄弟组件的沟通的解决方案就是找到两个组件共同的父组件，一层一层的调用上一层的回调，再一层一层地传递props。如果组件树嵌套太深，就会出现如下惨不忍睹的组件亲戚调用图。
下面就来说说如何避免这个组件亲戚图的两个方法：全局事件和Context。
3. 全局事件
可以使用事件来实现组件间的沟通：改变数据的组件发起一个事件，使用数据的组件监听这个事件，在事件处理函数中触发setState来改变视图或者做其他的操作。使用事件实现组件间沟通脱离了单向数据流机制，不用将数据或者回调函数一层一层地传给子组件，可以避免出现上述的亲戚图。
事件模块可以使用如EventEmitter或PostalJS这些第三方库，也可以自己简单实现一个：
var EventEmitter = {
_events: {},
dispatch: function (event, data) {
if (!this._events[event]) // no one is listening to this event
for (var i = 0; i & this._events[event]. i++)
this._events[event][i](data);
subscribe: function (event, callback) {
if (!this._events[event]) this._events[event] = []; // new event
this._events[event].push(callback);
unSubscribe: function(event){
if(this._events && this._events[event]) {
delete this._events[event];
组件代码如下：
var MyContainer = React.createClass({
render: function(){
&CurItemPanel /&
&SelectionButtons/&
var CurItemPanel = React.createClass({
getInitialState: function(){
curItem: 'item1'
componentDidMount: function(){
var self =
EventEmitter.subscribe('changeItem', function(newItem){
self.setState({
curItem: newItem
componentWillUnmount: function(){
EventEmitter.unSubscribe('changeItem');
render: function(){
The curItem is:
{this.state.curItem}
var SelectionButtons = React.createClass({
onClickItem: function(item){
EventEmitter.dispatch('changeItem', item);
render: function(){
&button onClick={this.onClickItem.bind(this, 'item1')}&item1&/button&
&button onClick={this.onClickItem.bind(this, 'item2')}&item2&/button&
ReactDOM.render(
&MyContainer /&,
document.getElementById('example')
事件绑定和解绑可以分别放在componentDidMount和componentWillUnMount中。由于事件是全局的，最好保证在componentWillUnMount中解绑事件，否则，下一次初始化组件时事件可能会绑定多次。 使用事件模型，组件之间无论是父子关系还是非父子关系都可以直接沟通，从而解决了组件间层层回调传递的问题，但是频繁地使用事件实现组件间沟通会使整个程序的数据流向越来越乱，因此，组件间的沟通还是要尽量遵循单向数据流机制。
4. context（上下文）
使用上下文可以让子组件直接访问祖先的数据或函数，无需从祖先组件一层层地传递数据到子组件中。
MyContainer组件：
var MyContainer = React.createClass({ getInitialState: function(){ return { curItem: 'item1' } }, childContextTypes: { curItem: React.PropTypes.any, changeItem: React.PropTypes.any }, getChildContext: function(){ return { curItem: this.state.curItem, changeItem: this.changeItem } }, changeItem: function(item){ this.setState({ curItem: item }); }, render: function(){ return ( &div& &CurItemWrapper /& &ListWrapper changeItem={this.changeItem}/& &/div& ) } });
childContextTypes用于验证上下文的数据类型，这个属性是必须要有的，否则会报错。getChildContext用于指定子组件可直接访问的上下文数据。
CurItemWrapper组件和CurItemPanel组件：
var CurItemWrapper = React.createClass({
render: function(){
&CurItemPanel /&
var CurItemPanel = React.createClass({
contextTypes: {
curItem: React.PropTypes.any
render: function(){
The curItem is: {this.context.curItem}
}); 在&CurItemPanel /&通过this.context.curItem属性访问curItem，无需让&CurItemWrapper /&将curItem传递过来。必须在contextTypes中设置curItem的验证类型，否则this.context是访问不了curItem的。
ListWrapper组件和List组件：
var ListWrapper = React.createClass({ render: function(){ return ( &div& &List /& &/div& ) } }); var List = React.createClass({ contextTypes: { changeItem: React.PropTypes.any }, onClickItem: function(item){ this.context.changeItem(item); }, render: function(){ return ( &ul& &li onClick={this.onClickItem.bind(this, 'item1')}&I am item1, click me!&/li& &li onClick={this.onClickItem.bind(this, 'item2')}&I am item2, click me!&/li& &/ul& ) } });
同上，&List /&可以通过this.context.changeItem获取&MyContainer /&的改变curItem的changeItem函数。
为了在React中更加清晰地管理数据，Facebook提出了Flux架构，而redux则是Flux的一种优化实现。
关于redux，另外一个比我帅气的同事已经写了一篇详细的redux介绍博文，传送门在下面，有兴趣的可以去看看。
当Redux与React搭配使用时，一般都是在最顶层组件中使用Redux。其余内部组件仅仅是展示性的，发起dispatch的函数和其他数据都通过props传入。然后，我们又会看到那熟悉的组件亲戚调用图：
如果使用全局事件解决方案，那么redux中漂亮的，优雅的单向数据管理方式就会遭到破坏。于是，使用context就成了解决这种层层回调传递问题的首选方案，下面给出一个简单例子：
index.js：
import { createStore, applyMiddleware } from 'redux';
import reducers from "./reducers"
import { Provider } from 'react-redux'
import React, {Component} from 'react';
import { render } from 'react-dom';
import App from './App';
let store = createStore(reducers);
&Provider store={store}&
&/Provider&,
document.getElementById('root')
reducers.js:
export default function changeItem(state = {'curItem': 'item1'}, action){
switch(action.type) {
case 'CHANGE_ITEM':
return Object.assign({}, {
curItem: action.curItem
actions.js:
export function changeItem(item) {
type: 'CHANGE_ITEM',
curItem: item
App.js(组件代码)：
import React, {Component} from 'react';
import { connect, Provider } from 'react-redux';
import { changeItem } from './actions';
class App extends Component{
constructor(props, context) {
super(props, context);
getChildContext() {
curItem: this.props.curItem,
changeItem: this.props.changeItem
render() {
&CurItemPanel /&
App.childContextTypes = {
curItem: React.PropTypes.any,
changeItem: React.PropTypes.any
class CurItemPanel extends Component {
constructor(props, context) {
super(props, context);
render() {
&div&The curItem is: {this.context.curItem}&/div&
CurItemPanel.contextTypes = {
curItem: React.PropTypes.any
class List extends Component {
constructor(props, context) {
super(props, context);
onClickItem (item){
this.context.changeItem(item);
render() {
&li onClick={this.onClickItem.bind(this, 'item1')}&I am item1, click me!&/li&
&li onClick={this.onClickItem.bind(this, 'item2')}&I am item2, click me!&/li&
List.contextTypes = {
changeItem: React.PropTypes.any
let select = state =& { return state};
function mapDispatchToProps(dispatch) {
changeItem: function(item) {
dispatch(changeItem(item));
export default(connect(select, mapDispatchToProps))(App);
上述代码中，Store是直接与智能组件&App /&交互的，所以Store将state数据curItem和dispatch函数changeItem作为props传给了&App /&。在&App /&中将curItem数据和changeItem函数作为上下文，作为子组件的笨拙组件就可以之间通过上下文访问这些数据，无需通过props获取。
1.redux的官方文档中是使用ES6语法的，所以这里的React代码也使用ES6做例子
2.运行上述代码需要构建代码，大家可以在redux的github中下载redux带构建代码的examples，然后将代码替换了再构建运行。
6. transdux
偶尔之间发现一个叫transdux的东西。这是一个类redux的数据沟通框架，作者的初衷是为了让用户写出比redux更简洁的代码，同时还能获得[fl|re]dux的好处。用户端使用该框架的话，可以解决下面一些redux中不好看的代码写法：
1）redux中需要创一个全局的store给Provider。Transdux中省略这个store。
2）redux与react搭配使用时，redux需要通过connect方法将数据和dispatch方法传给redux。Transdux没有connect。
3）redux需要把action当props传下去，跟传callback一样。Trandux不会出现这种传递。
使用transdux需要以下步骤
（1）安装trandux
npm install transdux –save
（2）把component包到Transdux里
import React, {Component} from 'react';
import Transdux from 'transdux';
import App from './TransduxApp.js';
import { render } from 'react-dom';
&Transdux&
&/Transdux&,
document.getElementById('root')
（3）定义component能干什么，component的状态如何改变
import React, {Component} from 'react';
import {mixin} from 'transdux'
import ChangeButton from './ChangeButton';
// 定义action是怎么变的
let actions = {
addHello(obj, state, props) {
// 返回state
msg: obj.msg
class App extends Component{
constructor(props){
super(props);
this.state = {msg: 'init'};
render() {
// 应该传入调用了store.dispatch回调函数给笨拙组件
{this.state.msg}
&ChangeButton /&
export default mixin(App, actions);
（4）使用dispatch
import React, {Component} from 'react';
import {mixin} from 'transdux'
import minApp from './TransduxApp';
class ChangeButton extends Component{
this.dispatch(minApp, 'addHello', {'msg': 'hello world'});
render() {
&button onClick={this.click.bind(this)}&change content&/button&
export default mixin(ChangeButton, {});
mixin方法扩为&ChangeButton /&扩展了一个dispatch方法。dispatch方法需要三个参数：接手消息的组件、改变组件的actions、传递的对象。&ChangeButton /&的按钮事件处理函数调用了该dispatch后，会改变&App /&中的状态。
使用了Clojure的Channel通信机制，实现了组件与组件之间的直接通信。这种通信的效果类似与events，每个组件可以维护着自己的state，然后用mixin包装自己传给其他组件改变状态。
Transdux的传送门在下面，有兴趣的同学可以去看看：
https://blog.oyanglul.us/javascript/react-transdux-the-clojure-approach-of-flux.html
简单的的组件沟通可以用传props和callback的方法实现，然而，随着项目规模的扩大，组件就会嵌套得越来越深，这时候使用这个方法就有点不太适合。全局事件可以让组件直接沟通，但频繁使用事件会让数据流动变得很乱。如果兄弟组件共同的父组件嵌套得太深，在这个父组件设置context从而直接传递数据和callback到这两个兄弟组件中。使用redux可以让你整个项目的数据流向十分清晰，但是很容易会出现组件嵌套太深的情况，events和context都可以解决这个问题。Transdux是一个类redux框架，使用这个框架可以写出比redux简洁的代码，又可以得到redux的好处。
参考文章：
1. //how-to-communicate-between-react-components/
2.&& 看我们3天hackday都干了些什么
人打赏支持
码字总数 0
支付宝支付
微信扫码支付
打赏金额: ￥
已支付成功
打赏金额: ￥实现React单页应用的方法详解
作者：一个萝卜一个坑
字体：[ ] 类型：转载 时间：
今天我们来学习React是如何构建起一个单页应用的，React作为目前最流行的前端框架之一，其受欢迎程度不容小觑，从这门框架上我们可以学到许多其他前端框架所缺失的东西，也是其创新性所在的地方，比如虚拟DOM、JSX等。下面一起来看看。
首先在学习这门框架前，你需要对以下知识有所了解：
&&&& 1.原生JS基础
&&&& 2.CSS基础
&&&& 3.npm包管理基础
&&&& 4.webpack构建项目基础
&&&& 5.ES6规范
以上五个知识点也是目前学习其他前端框架所必须了解的前置任务。
JS和CSS就不多说了，npm是目前最提倡也是占据主导地位的包管理工具，还在用bower或者其他工具的童鞋可以考虑下了。而webpack作为新一代打包工具，已经在前端打包工具中独占鳌头，和Browserify相比也有很大优势。至于ES6规范虽然现在主流浏览器还不兼容，但可以使用babel等转换器进行转换。
结合其他的一些主流前端框架，我个人认为构建单页应用有这样三个基本的东西：组件、路由、状态管理。那么接下来我就基于这三者来介绍React，当然其中会穿插一些额外的知识点。
React的组件撰写和调用主要依赖于ES6的模块化和JSX的语法，以下是一个例子：
// main.js
import React from 'react'
import { render } from 'react-dom'
import MyComponent from './component.js'
import './main.css'
class MyDemo ponent {
render() {
&div className="box"&
&MyComponent /&
&MyDemo /&
), document.getElementById('app'))
// component.js
import React from 'react'
export default class MyComponent ponent {
render() {
&p&这是一个组件！&/p&
// main.css
width: 100%
相比Vue.js框架，我个人认为React的组件编写方式还是没有Vue来的舒服，组件的css样式还是脱离在组件外部的，维护起来也不是很方便。
从这个例子中我们就可以看到React的虚拟DOM和JSX的特性了。相比其他框架，React的虚拟DOM不仅可以提升页面的性能，同时还可以防止XSS攻击等。关于虚拟DOM的具体原理这里不作介绍
至于JSX语法则是JS的一种语法糖，我们可以通过这种语法糖来便捷实现一些功能，这里JSX 把类 XML 的语法转成纯粹 JavaScript，XML 元素、属性和子节点被转换成 React.createElement 的参数。类似的JS语法糖还有TypeScript等。
前端路由机制是目前构建单页应用（SPA）最重要的一环之一。通过前端路由我们可以优化用户体验，不需要每次都从服务器获取全部数据，从而快速将页面展现给用户。
React路由依赖于React Router。React Router 保持 UI 与 URL 同步。它拥有简单的 API 与强大的功能例如代码缓冲加载、动态路由匹配、以及建立正确的位置过渡处理。
下面是一个React路由的例子：
import React, { Component } from 'react'
import { render } from 'react-dom'
import { Router, Route, IndexRoute, Link, browserHistory } from 'react-router'
const ACTIVE = { color: 'red' }
class App extends Component {
render() {
&h1&我的路由&/h1&
&li&&Link to="/" activeStyle={ACTIVE}&首页&/Link&&/li&
&li&&Link to="/users" activeStyle={ACTIVE}&用户页&/Link&&/li&
{this.props.children}
class Index ponent {
render() {
&h2&Index!&/h2&
class Users ponent {
render() {
&h2&Users&/h2&
&Router history={browserHistory}&
&Route path="/" component={App}&
&IndexRoute component={Index}/&
&Route path="users" component={Users}&&/Route&
), document.getElementById('app'))
这里只列出了React的一种路由写法。相比其他框架，React路由的语法更加通俗易懂。&
状态管理不是单页应用必须的，使用它能够帮助我们统一管理各个状态的变更，使整个项目流程清晰可维护。React实现状态管理可以使用官方推荐的Redux。
Redux使用的是严格的单向数据流。整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。&
这里我用React写了一个单页网站，页面如下：
因为上面的实例中我用到了Fetch来进行Ajax交互，所以这里简单介绍下Fetch。
我们可以把Fetch作为下一代Ajax技术，它采用了目前流行的 Promise 方式处理。
利用Fetch我们可以这样写Ajax进行数据交互：
// 获取数据方法
fetchFn = () =& {
fetch('../../data.json')
.then((res) =& { console.log(res.status);return res.json() })
.then((data) =& { this.setState({lists:data.listData}) })
.catch((e) =& { console.log(e.message) })
学习一门框架最重要的并不是学习它的技术，而是学习其带来的解决问题的思路。通过React这一门框架的学习，你可以从它独特的新特性中发掘一种新的思维模式。只有思维层面得到了扩展，你才能在前端的海洋里自由翱翔。希望本文对大家学习React有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具酷勤网 C 程序员的那点事！
当前位置： >
浏览次数：次
预计阅读时间: 9 分钟
虚拟DOM是React的基石。
引入虚拟DOM，一方面是性能的考虑。Web应用和网站不同，一个Web应用 中通常会在单页内有大量的DOM操作，而这些DOM操作很慢。
在React中，应用程序在虚拟DOM上操作，这让React有了优化的机会。简单说， React在每次需要渲染时，会先比较当前DOM内容和待渲染内容的差异， 然后再决定如何最优地更新DOM。这个过程被称为reconciliation。
React对象的三个重要方法：
createElement(type,[props],[children&])
在虚拟DOM上创建指定的React元素参数type用来指定要创建的元素类型，可以是一个字符串或一个React组件类型。当使用字符串时，这个参数应当是标准的HTML标签名称，比如：p、div、canvas等等。
参数props是可选的JSON对象，用来指定元素的附加属性，比如样式、CSS类等等。 我们在示例中简单的设置为null。
从第三个参数children开始的所有参数，都被认为是这个元素的子元素。
var el = React.createElement(
React.createElement(&li&,null,&China&),
React.createElement(&li&,null,&Japan&),
React.createElement(&li&,null,&Korea&)
render(element,container,[callback])
将虚拟DOM上的对象渲染到真实DOM上 参数element是我们使用createElement()方法创建的React元素，注意，不是HTML元素！
参数container是真实DOM中的HTML元素，作为渲染的目标容器，它的内容将被render()方法 的执行改变。
callback参数是可选的函数，当渲染完成或更新后被执行，通常我们不用它。
React.createClass(meta)
参数meta是一个实现预定义接口的JavaScript对象，用来 对React组件原型进行扩展。
在meta中，至少需要实现一个render()方法，而这个方法， 必须而且只能返回一个有效的React元素。
render:function(){
return React.createElement(
&div&,null,
React.createElement(&div&,null,&header&),
React.createElement(&div&,null,&content&),
React.createElement(&div&,null,&footer&)
&React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。
要渲染 HTML 标签，只需在 JSX 里使用小写字母开头的标签名
var myDivElement = &div className=&foo& /&;
React.render(myDivElement, document.body);
要渲染 React 组件，只需创建一个大写字母开头的本地变量。
var MyComponent = React.createClass({/*...*/});
var myElement = &MyComponent someProperty={true} /&;
React.render(myElement, document.body);
JSX 把类 XML 的语法转成纯粹 JavaScript
// 输入 (JSX):
var app = &Nav color=&blue& /&;
// 输出 (JS):
var app = React.createElement(Nav, {color:&blue&});
//注意，要想使用 &Nav /&，Nav 变量一定要在作用区间内。
JSX 也支持使用 XML 语法定义子结点
var Nav, P
// 输入 (JSX):
var app = &Nav color=&blue&&&Profile&click&/Profile&&/Nav&;
// 输出 (JS):
var app = React.createElement(
{color:&blue&},
React.createElement(Profile, null, &click&)
JavaScript 表达式
属性表达式
要使用 JavaScript 表达式作为属性值， 只需把这个表达式用一对大括号 ({}) 包起来，不要用引号 (&&)。
// 输入 (JSX):
var person = &Person name={window.isLoggedIn ? window.name : ''} /&;
// 输出 (JS):
var person = React.createElement(
{name: window.isLoggedIn ? window.name : ''}
子节点表达式
// 输入 (JSX):
var content = &Container&{window.isLoggedIn ? &Nav /& : &Login /&}&/Container&;
// 输出 (JS):
var content = React.createElement(
Container,
window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
你只需要在一个标签的子节点内(非最外层)小心地用 {} 包围要注释的部分。
var content = (
{/* 一般注释, 用 {} 包围 */}
name={window.isLoggedIn ? window.name : ''} // 行尾注释
参考文章：
& 相关主题：React 点击按钮显示div与隐藏div，并给div传children
时间： 16:11:20
&&&& 阅读：2943
&&&& 评论：
&&&& 收藏：0
标签：最近做了一个react的点击按钮显示与隐藏div的一个小组件：
【筛选】组件FilterButton
import React,{Component} from ‘react‘;
import {render} from ‘react-dom‘;
export default class FilterButton extends Component{
constructor(props){
super(props);
this.state = {
clickProps:{
display: ‘none‘,
//控制display的值来隐藏与显示
name:‘筛选‘
//组件的props发生改变,在组件接收到一个新的prop时被执行。这个方法在初始化render时不会被调用。
componentWillReceiveProps(nextProps) {
if(nextProps.needConfirm) {
this.setState(
clickProps:{
display: ‘none‘,
name:‘筛选‘
‘inline-block‘ == this.state.clickProps.display
条件：当前的state中display的值是否为 inline-block
this.setState({clickProps:{display: ‘none‘,name:‘筛选‘}})
如果是，则隐藏div并在button上显示‘筛选‘
this.setState({clickProps:{display: ‘inline-block‘,name:‘取消‘}});
如果不是，则显示div并在button上显示‘取消‘
changeDisplay() {
‘inline-block‘ == this.state.clickProps.display ? this.setState({clickProps:{display: ‘none‘,name:‘筛选‘}}) : this.setState({clickProps:{display: ‘inline-block‘,name:‘取消‘}});
this.props.click(this.state.clickProps.display);
//this.props.children为这个按钮的子组件
&div className="box" style={{‘margin‘: ‘20‘}}&
&button ref="tip" className="btn btn-default" style={{‘display‘:‘block‘,‘marginTop‘: ‘118‘}} onClick={this.changeDisplay.bind(this)}&&span className="glyphicon glyphicon-th-list"&&/span& {this.state.clickProps.name}&/button&
&div className="filter-box" style={{‘display‘:this.state.clickProps.display,‘height‘:‘auto‘,‘padding‘:‘10‘,‘border‘:‘1px solid #ddd‘,‘borderRadius‘:‘4‘,‘boxShadow‘:‘0px 2px 4px #ccc‘,‘marginTop‘:‘10‘,‘backgroundColor‘:‘#fff‘,‘position‘:‘fixed‘,‘left‘:‘310px‘,‘zIndex‘:‘9999‘,‘transition‘:‘all 3s ease-in-out‘}}&
{this.props.children}
【调用】组件&FilterButton
import React,{Component} from ‘react‘;
import {render} from ‘react-dom‘;
import Input from ‘react-bootstrap/lib/Input.js‘;
import FilterButton from ‘../../../../public_component/button/FilterButton‘;
export default class InspectionResults extends Component {
constructor(props){
super(props);
//使用一个常量，调用FilterButton，并把它的子组件回传
const selectBtn = (
&FilterButton click={this.selectClick.bind(this)} needConfirm={this.state.needConfirm}&
&Input className="box-select" type=‘select‘
placeholder="选择部门" onChange={this.changeDepartment.bind(this)} value={this.state.department}&
{department}
&Input className="box-select" type=‘select‘
placeholder="选择产品线" onChange={this.changeProductLine.bind(this)} value={this.state.productLine}&
{productLine1}
&button type="button" name="新增" className="btn btn-jj-add mt24" onClick={this.selectConfirm.bind(this)}&
&/FilterButton&
&div&{selectBtn}&/div&
react.js 传子组件的另一个方法，也可以这样做：
const children = (
&Input className="box-select" type=‘select‘
placeholder="测试加载" onChange={this.changeDepartment.bind(this)} value={this.state.department}&
{department}
&Input className="box-select" type=‘select‘
placeholder="测试加载" onChange={this.changeProductLine.bind(this)} value={this.state.productLine}&
{productLine1}
&button type="button" name="新增" className="btn btn-jj-add mt24" onClick={this.selectConfirm.bind(this)}&
&FilterButton chlidren={this.props.children} /&
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！