2017-04-11 9 views
0

私は反応が新しく、何を知ろうとしているのかは、サーバーの一部のコンポーネントのレンダリングを避ける方法です。 は、ここに私のコードです:Reactの一部のコンポーネントのサーバーレンダリングを回避するにはどうすればよいですか?

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(フェードイン、ので、どのようにテキストに関する私のコードは、サーバーのレンダリングを持ってされないことを回避することができます。

答えて

0

いくつかの問題 - renderContent()を呼び出す必要はありません。これは動作します:

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>

関連する問題