将组件传递给React setState值

Question

I've got a Meteor app using React. I've added Session variables and want to pass the new Session value (which will be another React component) into another react component.

The user will click the p-tag in the SideNav and reset the Session to a React component.

SideNav component :

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>
  )
}

In the MainWindow, Tracker.autorun re-runs and sets the state to the component and renders the new state value.

Main Window component:

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>
    )
  }
}

I'm getting an error "Invariant Violation: Objects are not valid as a React child". Is this caused by the component being used in setState? Is there a way to do this?

Answer 1

Session set function accepts as a value EJSON-able Object which I think may not work with React Object.

However I would try (only a guess though):

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>
    )
  }
}