小编Kum*_*r R的帖子

我创建了一个包含行和子行的表.当我删除一个子行时,我需要重新渲染整个组件.

import React from 'react';
import ReactDOM from 'react-dom';
import auth from './auth'

export class FormList extends React.Component{

  constructor(props) {
    super(props);
    auth.onChange = this.updateAuth.bind(this)
    this.state = {results: []};
  }

  componentWillMount() {
    auth.login();
  }

  // call to get the whole list of forms for react to re-render.
  getForms() {
    if(this.state.loggedIn) {
      $.get(call server url, function(result) {
        this.setState({
             results: result.data.forms
        });
      }.bind(this));
    }
  }

  updateAuth(loggedIn) {
    this.setState({
     loggedIn: loggedIn
    });
    this.getForms()
  }

  componentDidMount() {
    this.getForms()
  }

  render() {
    return (
    <FormTable results={this.state.results} …

我有一个父组件和一个子组件,它只是一个"标签"元素.当我单击子元素时,我需要在父组件中调用该函数.我希望它被调用,但状态不会改变,当我看到覆盖文件时,函数没有被调用.

**更新:**代码适用于开发.这只是单元测试失败了.

这是我的父组件

parent.js

export default class Parent extends Component {
  constructor(props) {
   super(props)
   this.state={clickedChild: false}
   this.handleChildClick = this.handleChildClick.bind(this)
  }

  handleChildClick(index) {
    this.setState({clickedChild:true})
  }

  render(){
   const self = this
   return(
    const items = [{'id':1,'text':'hello'},{'id':2,'text':'world'}]
     <div>
       {items.map(function(item,index){
         return <ChildComponent onChildClick ={ self.handleChildClick.bind(null,index)} childItem={item} />
       })}
     </div>
   )}
}

子组件

export default class ChildComponent extends Component {
    constructor(props) { super(props)}

   render(){
    return(
     <label onClick={this.props.onChildClick}>{this.props.childItem.text} </label>
    )
   }
}

单元测试

import chai from 'chai'
import React from 'react'
import ReactDOM from 'react-dom'
import …

我有父子关系表

http://jsfiddle.net/ZPSVg/

html

<table>

<tr class="parent_row">
    <td >1</td>
    <td>2</td>
    <td>3</td>
    <td><a>Link</a></td>
    <td style="width:20px;"></td>
</tr>
<tr class="child_row">
    <td >1.1</td>
    <td>2.1</td>
    <td>3.1</td>
    <td><a>Link_child</a></td>
</tr>
<tr class="parent_row">
    <td >1</td>
    <td>2</td>
    <td>3</td>
    <td><a>Link</a></td>
    <td style="width:20px;"></td>
</tr>
<tr class="child_row">
    <td >1.2</td>
    <td>2.2</td>
    <td>3.2</td>
    <td><a>Link_child</a></td>
    <td style="width:20px;"></td>
</tr>
</table>

CSS

table{
    margin:0;
    padding:0;
    width:100%;
    border-collapse: collapse;
    border-spacing: 0;
}

tr{
    border-color: #D8D8D8;
    border-style: solid;
    border-width: 1px 0 0;
    line-height:2em;
    font-size:14px;
}

td:first-child{
    padding-left:20px;
}

.child_row{
    border-style:dotted;
}

现在父行和子行都有边框。父行为实线，子行为虚线。

对于子行，虚线边框应从文本开始的位置开始，而不是从左端开始。

关于子行的代码，它应该从 1.1 和 2.1 开始

我尝试剪切边框图像并将其放置为距左侧 20px …

我正在我的动作创建者中进行异步调用并使用结果调用我的reducer,但由于某种原因我无法理解减速器没有被调用.

actions.js(动作和动作创建者)

export const GET_FORMS = 'GET_FORMS'

export function getForms() {
  $.get("server url", function(result) {
   return {
    type: GET_FORMS,
    formlist: result.data.forms
   }   
  })
 }

reducers.js

import { GET_FORMS } from '../actions/actions'

export default function formAction(state = {forms:[]}, action) {
  console.log("received action"+action.type)
  switch (action.type) {

    case GET_FORMS:
      console.log("Action:"+action);
      return Object.assign({},state,{
       forms:action.formlist
      })

   default:
    return state
 }
}

App.js

import React, { Component, PropTypes } from 'react'
import ReactDOM from 'react-dom';
import { bindActionCreators } from 'redux'
import { connect } from …