如何避免服務器渲染React中的某些組件？

Question

我是新來的反應，我想知道的是我如何避免一些組件的服務器渲染。 這裏是我的代碼：

export default class PrTopBanner extends React.Component { 
    constructor(props) { 
    super(props); 
    this.isTextVisible = false; 
    } 

    componentDidMount() { 
    this.isTextVisible = true; 
    } 

    getContent() { 
    return (
     <div> 
     <a className={classNames(cssClasses.textWrapper, { 
      'textVisible': this.isTextVisible})} 
     </a> 
     </div> 
    ); 
    }  
} 

文本內容不可見，並在componentDidMount（消失），所以如何避免我的關於文本代碼不會有一個服務器渲染。

Answer 1

幾個問題 - 你需要調用render（）而不是getContent（）是一個。這工作：

class PrTopBanner extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.isTextVisible = false; 
 
    } 
 

 
    componentDidMount() { 
 
    this.isTextVisible = true; 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <a className='test'>test 
 
     </a> 
 
     </div> 
 
    ); 
 
    }  
 
} 
 

 
ReactDOM.render(<PrTopBanner />, document.querySelector('#container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="container"> 
 
</div>