Question

我已成功设置了一个带有react的node.js应用程序。不，我已经知道在服务器端渲染后，我必须在客户端呈现内容。我想在服务器端使用moment.js来提供日期。但如果我在客户端重新发送它就会被删除。

我在服务器端的代码看起来像这样

import React from 'react';
import helper from './helper/helper'

let Element = React.createClass({
    render: function() {
        return (
            <td className="line" key={this.props.id}>
                <span className="time">
                    <span>{this.props.from}</span>
                    <span>-</span>
                    <span>{this.props.to}</span>
                </span>
            </td>
        );
    }
});

let Nav = React.createClass({
    render: function(){
        let day = helper.date.getDay(); //function to give me a Date like 01.01.2017
        return (
            <div className="nav">
                <div className="arrow"><i className="fa fa-caret-left"/></div>
                <div className="date"><div>{day}</div></div>
                <div className="arrow"><i className="fa fa-caret-right"/></div>
            </div>
        );
    }
});

let Day = React.createClass({
    render: function(){
        let lines = [];
        for(let i = 6; i < 23; i++){
            let from = i;
            let to = i + 1;
            lines.push(
                <Element from={from} to={to} key={i}/>
            );
        }
        return (
        <div id="day">
            <Nav/>
            <table>
                <tbody>
                <tr>{lines}</tr>
                </tbody>
            </table>
        </div>
        );
    }
});

export default Day

在客户端，我想重新呈现它和一个onclick功能。

let Element = React.createClass({
    render: function() {
        return (
            <td className="line" key={this.props.id}>
                <span className="time" onClick={this.props.shout}>
                    <span>{this.props.from}</span>
                    <span>-</span>
                    <span>{this.props.to}</span>
                </span>
            </td>
        );
    }
});

let Nav = React.createClass({
    render: function(){
        return (
            <div className="nav">
                <div className="arrow"><i className="fa fa-caret-left"/></div>
                <div className="date"></div>
                <div className="arrow"><i className="fa fa-caret-right"/></div>
            </div>
        );
    }
});

let Day = React.createClass({
    shout(){
        return function(){
            alert('shout');
        }
    },
    render(){
        let lines = [];
        for(let i = 6; i < 23; i++){
            let from = i;
            let to = i + 1;
            lines.push(
                <Element shout={this.shout()} from={from} to={to} key={i}/>
            );
        }
        return (
            <div id="day">
                <Nav/>
                <table>
                    <tbody>
                    <tr>{lines}</tr>
                    </tbody>
                </table>
            </div>
        );
    }
});

$(document).ready(function(){
    ReactDOM.render(
        <Day />,
        document.querySelector('#root')
    );
});

我的点击功能正在运行但我的日期被删除，并显示一条错误消息，由于内容不同，因此无法呈现。我如何在服务器端呈现我的html，而不是在客户端上重用它来处理？我认为ReactDOM.render不会删除已存在的内容，例如我的日期。我哪里错了？

使用react和node.js重新呈现服务器端内容

0 个答案: