Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/465.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何处理需要子组件状态的流星数据?_Javascript_Meteor_Reactjs - Fatal编程技术网

Javascript 如何处理需要子组件状态的流星数据?

Javascript 如何处理需要子组件状态的流星数据?,javascript,meteor,reactjs,Javascript,Meteor,Reactjs,将Meteor 1.3中的一些代码切换到ES6+React语法。组件需要获取流星数据,所以我使用createComponent替换getMeteorData()。问题是,旧的getMeteorData使用了组件的状态,createContainer组件没有访问它 旧代码: Component = React.createClass({ mixins: [ReactMeteorData], getMeteorData() { var mo = this.state.curren

将Meteor 1.3中的一些代码切换到ES6+React语法。组件需要获取流星数据,所以我使用createComponent替换getMeteorData()。问题是,旧的getMeteorData使用了组件的状态,createContainer组件没有访问它

旧代码:

Component = React.createClass({
   mixins: [ReactMeteorData],
   getMeteorData() {
    var mo = this.state.currentMonth;
    var start = newDate(moment(mo).startOf('month'));
    return {
     events:     collections.events.find({
        $or:       qwry,
        startDate: { $gte: start },
        endDate:   { $lte: end }
      }).fetch(),
    }
  },
  render() {
   ...
  }
});
迄今为止的新代码

class Component = React.Component {
 constructor(props) {
  super(props);
 }
 render() {
  ...
 }
}

export default createContainer(({params}) => {
var mo = this.state.currentMonth;
        var start = newDate(moment(mo).startOf('month'));
        return {
         events:     collections.events.find({
            $or:       qwry,
            startDate: { $gte: start },
            endDate:   { $lte: end }
          }).fetch(),
        }
}, Component);

获取错误“无法获取未定义的当前月份”,因为它正在尝试访问状态。有什么建议吗?

您可以将旧组件分为两部分:一部分保存状态并处理事件,另一部分仅显示结果。确保将事件处理程序作为回调传递给子组件。还要注意父组件如何使用
createContainer()
函数的返回值

// Parent component, setState should go here
export default class StateHolder extends React.Component {
  constructor(params) {
    super(params);
    this.state = {myKey: 1};
  }

  incrementKey() {
    this.setState({myKey: this.state.myKey + 1});
  }

  render() {
    return <Container myKey={this.state.myKey} onClick={this.incrementKey.bind(this)} />;
  }
}

// Child component, renders only
class PureComponent extends React.Component {
  render() {
    return <div>
      {this.props.myValue}
      <button onClick={this.props.onClick}>click me</button>
    </div>;
  }
}

// Decorated child container. 
// Make sure to use this one in parent component's render() function!
let Container = createContainer((props) => {
  let doc = MyCollection.findOne({someKey: props.myKey});
  return {
    myValue: doc ? doc.someValue : null
  }
}, PureComponent);
//父组件,setState应位于此处
导出默认类StateHolder扩展React.Component{
构造函数(参数){
超级(params);
this.state={myKey:1};
}
递增键(){
this.setState({myKey:this.state.myKey+1});
}
render(){
返回;
}
}
//子组件,仅渲染
类PureComponent扩展了React.Component{
render(){
返回
{this.props.myValue}
点击我
;
}
}
//装饰儿童容器。
//确保在父组件的render()函数中使用此函数!
let Container=createContainer((道具)=>{
让doc=MyCollection.findOne({someKey:props.myKey});
返回{
myValue:doc?doc.someValue:null
}
},纯组分);

尽量不要将它从孩子发送给父母,应该是相反的,父母掌握孩子的状态,并将其作为道具传递下去。。。多组件上的react文档:在react中,数据通过道具从所有者流向所有者组件:是的,我意识到了这一点,但我正试图根据以前的处理方式找出转换为新格式的最佳方法。只是想弄清楚我是否需要完全修改当前代码中获取“mo”变量的方式,或者对于以前在getMeteorData中使用组件状态的组件是否有某种解决方法。为什么不能将getMeteorData函数放在react.component中?我可以退出这个博客posthttp://www.newmediacampaigns.com/blog/refactoring-react-components-to-es6-classes 我希望这就是你所说的…我仍然不是100%确定谢谢你的资源!我认为这个问题有点特别,需要将React和Meteor结合使用。实际上,不能将mixin与React.Component元素一起使用,这意味着getMeteorData()的工作方式不正确。这可能是我们需要自己去解决的问题,因为到目前为止我们还没有找到一个合适的解决方案。@aedm非常感谢!