ReactJS: перенос реквизита

Question

ReactJS: перенос реквизита

Я нахожусь в процессе разработки приложения для мониторинга в реальном времени в ReactJS для мониторинга датчиков. Я использую AutobahnJS + Websockets на PHP для потоковой передачи данных.

Это абстракция моей панели инструментов в представлении компонентов.
Абстракция панели инструментов в представлении компонентов

Main.jsx:

class Main extends React.Component {
constructor(props) {
super(props)
}

componentDidMount() {
$(document).foundation();

var that = this;

var conn = new ab.Session('ws://xx.xxx.xxx.xx', function() {
conn.subscribe('', function(topic, data) {
console.log(data);
that.setState({
result: data
});
});
}, function() {
console.warn('WebSocket connection closed');
}, {'skipSubprotocolCheck': true});
}
render() {

return (
<div>
<div className="off-canvas-wrapper">
<div className="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div className="off-canvas position-right" data-position="right" id="offCanvas" data-off-canvas>
<SensorDetails/>
</div>

<div className="off-canvas-content" data-off-canvas-content>
<Nav/>

<div className="row">
<div className="columns medium-12 large 12">
{this.props.children}
</div>
</div>
</div>
</div>
</div>
</div>
);
}
};

module.exports = Main;

Как правильно передавать реквизиты из Main.jsx в BuildingList.jsx? Я попытался заменить:

{this.props.children}

с

<Dashboard data={this.state.result}/>

Это работает, но я не могу получить доступ к своим ссылкам, например, Настройки аккаунта. Мой реакции-роутер настроен так:

<Router history={hashHistory}>
<Route path="/dashboard" component={Main} >
<Route path="/about" component={About} onEnter={requireLogin}/>
<Route path="/examples" component={Examples} onEnter={requireLogin}/>
<Route path="/accountSettings" component={AccountSettings} onEnter={requireLogin}/>
<IndexRoute component={Dashboard}/>
</Route>
<Route path="/" component={Login} onEnter={redirectIfLoggedIn}/>
</Router>

Как бы я исправить эту проблему? Благодарю.

2

autobahn php reactjs websocket

Решение

Другие решения

Ну, React предназначен для передачи реквизита сверху вниз.

Это делает управление данными действительно сложным, потому что у вас может быть много компонентов, которым нужны одни и те же данные.

Поэтому лучше использовать некоторую архитектуру Flux (например, Redux)
Или более простой уровень данных, такой как Mobx.

Вы должны взглянуть на каждый из них, потому что они очень разные, но предназначены, чтобы помочь вам с управлением данными (особенно) в React

1

Источник

Accepted Answer

Есть несколько способов справиться с этим.

Один из способов, который вы можете использовать, это сделать так, чтобы ваши дети находились внутри Main.jsx. Передача двух реквизитов вашим детям (state и updateState).

{React.Children.map(this.props.children, (child) => {
return React.cloneElement(child, {
state: this.state,
updateState: (state) => this.setState(state)
});
}}

С вашего дочернего компонента вы можете обновить состояние Main.jsx, вызвав это.

this.props.updateState({prop: 'value'})

Я не думаю, что это лучший способ сделать что-то в React. Я предпочитаю подходить к событию. У меня обычно будет что-то вроде следующего, чтобы прослушать и обновить «глобально доступное состояние».

Внутри Main.jsx

componentDidMount() {
App.Event.on('state.update', (state = {}) => this.setState(state));
}

App.Event это простая система событий, которую вы можете вызывать, вызывая подобные события.

App.Event.fire('state.change', {prop: 'value'});

3