使用自定义功能反应

我有这样使用自定义功能反应

class Hourly extends Component { 
    render() { 
    return (
     <div key={this.props.key} id={this.props.id} className="col-xs-3 text-center vcenter box parent"> 
     <div className="child"> 
      <div>{this._theDay(this.props.day)}</div> 
      <div>{this.props.summary}</div> 
     </div> 
     </div> 
    ); 
    } 
}

我想我在另一个组件后使用组件使用自定义函数（_theDay）组件

自定义功能：

_theDay(time) { 
    moment.locale('en-gb'); 
    var dateTime = moment(time*1000).format('dddd'); 
    return dateTime; 
    }

我调用组件后来与

 <Hourly 
      key={hour.time} 
      id={hour.time} 
      day={hour.time} 
      summary={hour.summary} 
     />

但是我得到的错误：Uncaught (in promise) DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.(…)

当我只是用<div>{this.props.day}</div>;一切工作正常，但后来我不能使用我的自定义功能

来源

2016-11-24 frisk0

试图重现您的问题，似乎为我工作： -/http://jsbin.com/wuqupehaqa/edit?html,js,output – BFree

嗯我可以看到， ...我尝试重新组织我的代码，就像在你的例子中，现在告诉我'_this4._theDay不是一个函数' – frisk0

对，所以我把'_theDay'函数放在Hourly类中，我猜测'因为你需要在其他地方重新使用该功能，所以不适合你。如果是这样的话，调用它时不要使用'this._Day'，并将函数放置在两个组件都可以访问的地方。 – BFree

我觉得这事做阵营试图更新DOM道具改变后。尝试使用与props.day相关的<div/>上的钥匙来帮助它知道孩子已经改变。

class Comp extends React.Component { 
    render() { 
    let day = this._theDay(this.props.day) 
    return <div key={day}>{day}</div>; 
    } 
}

这里的documentation on reconciling the DOM.

来源

2016-11-24 19:42:20

为了简单起见，我剥去了组件，这可能是一个坏主意。我已经有了一把钥匙。我刚刚更新了我的问题 – frisk0

使用自定义功能反应

回答

相关问题