的onClick處理程序不ReactDOMServer.renderToString

我試圖複製此琴註冊： http://jsfiddle.net/jhudson8/135oo6f8/的onClick處理程序不ReactDOMServer.renderToString

（我也試過了這個例子 http://codepen.io/adamaoc/pen/wBGGQv 和相同onClick處理程序存在問題）

，使小提琴使用ReactDOMServer.renderToString

我有這個調用：

res.send(ReactDOMServer.renderToString((
      <html> 
      <head> 

       <link href={'/styles/style-accordion.css'} rel={'stylesheet'} type={'text/css'}></link> 

      </head> 

      <body> 


      <Accordion selected='2'> 
       <AccordionSection title='Section 1' id='1'> 
        Section 1 content 
       </AccordionSection> 
       <AccordionSection title='Section 2' id='2'> 
        Section 2 content 
       </AccordionSection> 
       <AccordionSection title='Section 3' id='3'> 
        Section 3 content 
       </AccordionSection> 
      </Accordion> 
      </body> 
      </html> 
     )));

手風琴元素看起來像這樣：

const React = require('react'); 

const fs = require('fs'); 
const path = require('path'); 


const Accordion = React.createClass({ 

    getInitialState: function() { 
     // we should also listen for property changes and reset the state 
     // but we aren't for this demo 
     return { 
      // initialize state with the selected section if provided 
      selected: this.props.selected 
     }; 
    }, 

    render: function() { 

     // enhance the section contents so we can track clicks and show sections 
     const children = React.Children.map(this.props.children, this.enhanceSection); 

     return (
      <div className='accordion'> 
       {children} 
      </div> 
     ); 
    }, 

    // return a cloned Section object with click tracking and 'active' awareness 
    enhanceSection: function (child) { 

     const selectedId = this.state.selected; 
     const id = child.props.id; 

     return React.cloneElement(child, { 
      key: id, 
      // private attributes/methods that the Section component works with 
      _selected: id === selectedId, 
      _onSelect: this.onSelect 
     }); 
    }, 

    // when this section is selected, inform the parent Accordion component 
    onSelect: function (id) { 
     this.setState({selected: id}); 
    } 
}); 


module.exports = Accordion;

和AccordionSection部件看起來就像這樣：

const React = require('react'); 


const AccordionSection = React.createClass({ 

    render: function() { 

     const className = 'accordion-section' + (this.props._selected ? ' selected' : ''); 

     return (
      <div className={className}> 
       <h3 onClick={this.onSelect}> 
        {this.props.title} 
       </h3> 
       <div className='body'> 
        {this.props.children} 
       </div> 
      </div> 
     ); 
    }, 

    onSelect: function (e) { 
     console.log('event:',e); 
     // tell the parent Accordion component that this section was selected 
     this.props._onSelect(this.props.id); 
    } 
}); 



module.exports = AccordionSection;

一切正常，而CSS是工作，但問題是，的onClick沒有得到註冊。所以點擊手風琴元素什麼也不做。有沒有人知道爲什麼onClick處理程序可能不會在這種情況下注冊？

來源

2016-03-31 Alexander Mills

被JS的工作呢？ JS是否在客戶端工作？ –

我認爲缺少的一點是，一旦標記到達那裏，我們需要進行更多的React調用，這些調用實際上綁定了處理程序 –

React DOM render to string only only the initial HTML as a string without without JS。
您還需要一個客戶端反應路由器，它會根據其react-id將所需的JS處理程序附加到HTML。 JS需要在雙方運行。
快速啓動的通用渲染樣板。 https://github.com/erikras/react-redux-universal-hot-example
與您的問題類似的另一個問題。 React.js Serverside rendering and Event Handlers

來源

2016-03-31 03:51:42

沒有任何鉤子會向ReactDOMServer.RenderToString註冊。如果你想在你的反應組件上完成服務器端渲染+鉤子，你可以將它捆綁在客戶端（webpack，gulp等等）上，然後在服務器上使用ReactDOMServer.RenderToString。

這裏，幫助我完成這個博客文章： https://www.terlici.com/2015/03/18/fast-react-loading-server-rendering.html

來源

2016-03-31 03:56:30 fzxt

的onClick處理程序不ReactDOMServer.renderToString

回答

相關問題