Я задавался вопросом, возможно ли использовать, Реагируют для того, чтобы сделать логику и передать данные обратно функции JavaScript, не представляя HTML. Компонент, о котором я думаю, является чем-то, чему Вы передаете некоторые данные, и это передаст данные обратно функции JavaScript за пределами, реагируют. Я знаю, что это может быть сделано, и я сделал ту часть сам, но я не уверен, как Вы сделали бы это, не представляя HTML, поскольку это требуется. Это - даже случай практического применения для, реагируют?
Да это очень возможно и очень полезно, в случае ленивых компонентов загрузки.
Рассматривают этот пример с реагировать-маршрутизатором.
import React from 'react'
import { Route, Link } from 'react-router-dom'
function asyncComponent(getComponent) {
return class AsyncComponent extends React.Component {
static Component = null;
state = { Component: AsyncComponent.Component };
componentWillMount() {
if (!this.state.Component) {
getComponent().then(Component => {
AsyncComponent.Component = Component
this.setState({ Component })
})
}
}
render() {
const { Component } = this.state
if (Component) {
return <Component {...this.props} />
}
return null
}
}
}
const Page1 = asyncComponent(() =>
System.import('./Page1.js').then(module => module.default)
)
const Page2 = asyncComponent(() =>
System.import('./Page2.js').then(module => module.default)
)
const Page3 = asyncComponent(() =>
System.import('./Page3.js').then(module => module.default)
)
const ParentComponent = () => (
<div>
<ul>
<li>
<Link to="/page1">Page1</Link>
</li>
<li>
<Link to="/page2">Page2</Link>
</li>
<li>
<Link to="/page3">Page3</Link>
</li>
</ul>
<div>
<Route path="/page1" component={Page1}/>
<Route path="/page2" component={Page2}/>
<Route path="/page3" component={Page3}/>
</div>
</div>
)
Это возможно. реагировать-маршрутизатор является примером библиотеки с компонентами, не представляющими HTML. См. https://github.com/rackt/react-router
, из которого Это является компонентом Маршрута, реагируют-fouter с false возвращающего метода рендеринга:
const Route = React.createClass({
statics: {
createRouteFromReactElement
},
propTypes: {
path: string,
component,
components,
getComponent: func,
getComponents: func
},
/* istanbul ignore next: sanity check */
render() {
invariant(
false,
'<Route> elements are for router configuration only and should not be rendered'
)
}
})