Передача компонента в значение React setState
У меня есть приложение Meteor, использующее React. Я добавил переменные сеанса и хочу передать новое значение сеанса (которое будет другим компонентом React) в другой компонент реакции.
Пользователь щелкнет p-тег в SideNav и сбросит сеанс на компонент 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> 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>
)
}
}
Я получаю сообщение об ошибке «Неизменяемое нарушение: объекты недопустимы в качестве дочерних элементов React». Это вызвано компонентом, используемым в setState? Есть ли способ сделать это?
На самом деле он печатается как неопределенный. Хм.
Если я console.info сам компонент, я получаю объект. Если я console.info значение сеанса, я получаю {key: null, ref: null, props: {}, _owner: null, _store: {}}. Если я console.info this.state.text в ManiWindow, я получаю undefined.
Ответ - прекратить использовать сеанс - это означает, что вы пытаетесь сделать что-то не так! Вам необходимо реализовать компонент-оболочку вокруг ваших двух основных / побочных компонентов, которые могут управлять самим «состоянием» с помощью соответствующих методов («setState»), используя стандартный подход каскадных свойств для значений и обратных вызовов функций, устанавливающих состояние.
@ Энди Вы абсолютно правы. У сеансов есть своя польза, но это не одна из них.
Ответы 1
Функция набора сеансов принимает значение EJSON-совместимый объект, которое, как мне кажется, может не работать с 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>
)
}
}
Не могу заставить это работать. console.infoging SonataContent показывает "function () {return React.createElement (" div ", null," Injected Sonata component ");}"
возьмите this.state.text из return и console.info сразу после рендеринга вне return. Что это