Действительно ли возможно использовать, Реагируют, не представляя HTML?

Я задавался вопросом, возможно ли использовать, Реагируют для того, чтобы сделать логику и передать данные обратно функции JavaScript, не представляя HTML. Компонент, о котором я думаю, является чем-то, чему Вы передаете некоторые данные, и это передаст данные обратно функции JavaScript за пределами, реагируют. Я знаю, что это может быть сделано, и я сделал ту часть сам, но я не уверен, как Вы сделали бы это, не представляя HTML, поскольку это требуется. Это - даже случай практического применения для, реагируют?

62
задан 11 March 2014 в 11:25

2 ответа

Да это очень возможно и очень полезно, в случае ленивых компонентов загрузки.

Рассматривают этот пример с реагировать-маршрутизатором.

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>
)
5
ответ дан 31 October 2019 в 14:08

Это возможно. реагировать-маршрутизатор является примером библиотеки с компонентами, не представляющими 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'
    )
  }

})
13
ответ дан 31 October 2019 в 14:08

Другие вопросы по тегам:

Похожие вопросы: