Question

我使用React获得了一个Meteor应用。我添加了Session变量，并希望将新的Session值（将是另一个React组件）传递到另一个反应组件中。

用户将单击SideNav中的p-tag并将会话重置为React组件。

SideNav组件：

import React from 'react';
import { Session } from 'meteor/session';
import SonataContent from './sonata-content';

export default () => {
  injectSonataText = () => {
    const sonataContent = <SonataContent/>;
    Session.set('MainContent', sonataContent); /* Set Session value to component */
  };

  return (
    <div className="side-nav">
      <h2>Explore</h2>
      <p onClick={this.injectSonataText.bind(this)}><i className="material-icons">child_care</i><span>&nbsp;Sonatas</span></p>
    </div>
  )
}

在MainWindow中，Tracker.autorun重新运行并将状态设置为组件并呈现新的状态值。

主窗口组件：

import React from 'react';
import { Session } from 'meteor/session';
import { Tracker } from 'meteor/tracker';


export default class MainWindow extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: ""
    }
  }

  componentDidMount() {
    this.mainWindowTracker = Tracker.autorun(() => {
      const text = Session.get('MainContent');
      this.setState({text: text});
  });
}

  componentWillUnmount() {
    this.mainWindowTracker.stop();
  }

  render() {
    return (
      <p>{this.state.text}</p>
    )
  }
}

我收到错误＆＃34;不变违规：对象无效作为React孩子＆＃34;。这是由setState中使用的组件引起的吗？有没有办法做到这一点？

Answer 1

Session set function接受为EJSON-able Object的值，我认为它可能不适用于React Object。

但我会尝试（虽然只是猜测）：

injectSonataText = () => {
  Session.set('MainContent', SonataContent); /* Set Session value to component */
};

...

export default class MainWindow extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Component: null,
    }
  }

  componentDidMount() {
    this.mainWindowTracker = Tracker.autorun(() => {
      const MainContent = Session.get('MainContent');
      this.setState({Component: MainContent});
  });
}

  componentWillUnmount() {
    this.mainWindowTracker.stop();
  }

  render() {
    const { Component } = this.state;
    return (
      <p>
        {
          Component && <Component />
        }
      </p>
    )
  }
}

将组件传递给React setState值

1 个答案: