是否可以在不渲染HTML的情況下使用React？

Question

我想知道是否有可能使用React來完成邏輯並將數據發送回javascript函數，而無需呈現任何html。我正在考慮的組件是將某些數據傳遞給它，並將數據發送回javascript函數以外的反應。我知道這是可以完成的，而且我自己也完成了這部分工作，但我不知道如何在不需要呈現html的情況下執行此操作。這甚至是反應的實際用例嗎？

Answer 1

作爲陣營> = 16.2，可以使用任何這些版本：

render() { 
    return false; 
} 

render() { 
    return null; 
} 

render() { 
    return []; 
} 

render() { 
    return <></>; 
} 

undefined返回不起作用。

---

我想的成分是你的一些數據傳遞給， 東西，它就會將數據發送回一個JavaScript函數之外的反應。

爲什麼要爲此創建組件？大多數情況下，現有組件中的常規js函數就足夠了。

一個用例就是例子，當組件被安裝時設置一個副作用並在卸載時將其拆下。例如，如果您有縱向定位的ReactNative移動應用程序，則可以想象一個<Landscape/>組件，該組件在安裝時會暫時允許以橫向顯示應用程序，而在未安裝時，定位將重置爲應用程序默認設置。您當然可以在現有組件上管理此方向更改，但創建專用組件可能更方便且可重用。

請注意，React也可以在服務器端運行，所以我猜測可能以不涉及任何DOM修改（但可能只是虛擬DOM計算）的方式使用它。

Answer 2

只是爲了澄清本諾的評論。該ReactComponent.render method doc狀態：

您也可以返回null或false，表明你不希望呈現什麼。在幕後，React渲染一個<noscript>標籤以使用我們當前的差異算法。當返回null或false時，this.getDOMNode()將返回null。

Answer 3

這是可能的。 react-router是組件未呈現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' 
    ) 
    } 

}) 

Answer 4

是的，這是非常可能的，非常有用的，在延遲加載組件的情況下。

考慮這個例子與react-router。

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