React.js 小书的朋友可以在这里畅所欲言


  • 0

    百思不得姐的问题:
    从小书上copy下来放在sublime中打开后控制台不报错,但页面上没内容

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8"/>
    	<title>Document</title>
    	<script src="https://cdn.bootcss.com/react/15.5.0/react.js"></script>
    	<script src="https://cdn.bootcss.com/react/15.5.0/react-dom.js"></script>
    
    </head>
    <body>
    	<div class="wrapper"></div>
    
    	<script type="text/jsx">
    		class LikeButton {
    			render() {
    				return `
    			        <button id='like-btn'>
    			          <span class='like-text'>赞</span>
    			          <span>👍</span>
    			        </button>
    			    `
    			}
    		}
    		const wrapper = document.querySelector('.wrapper')
    		const likeButton1 = new LikeButton()
    		wrapper.innerHTML = likeButton1.render()
    
    		const likeButton2 = new LikeButton()
    		wrapper.innerHTML += likeButton2.render()
    	</script>
    </body>
    </html>
    

    放在jsfiddle中可以输出0_1494906795639_2017-05-16_115237.png

    怎么会出现这种问题?


  • 0
    administrators

    @labike

    text/jsx => text/javascript


  • 0

    @胡子大哈
    谢谢哈哥


  • 0

    @胡子大哈

    return (‘ ’)中单引号会报错


  • 0
    administrators

    @labike

    单引号不能换行,要用 ES6 的反引号。


  • 0

    建议修改 propTypes 的引入方式,小书里的引入方式 import React, { Component, PropTypes } from 'react' 己经被最新的 React 建议修改也即将废除了。
    目前建议的方式是: import PropTypes from 'prop-types'


  • 0

    希望可以加一些 stateless function component 的内容


  • 0
    administrators

    @Sunjourney 是的是的,这个得改一下。


  • 0

    最后一部分一直显示(90%)。想问下,这本书是不是已经基本完成了?会有新的内容增加吗?


  • 0

    关于书中

    57:9 warning 'likedText' is assigned a value but never used no-unused-vars
    58:9 warning 'unlikedText' is assigned a value but never used no-unused-vars

    这是react版本问题还是什么问题?


  • 0
    administrators

    @labike ESLint 的语法检查


  • 0

    此回复已被删除!

  • 0

    @胡子大哈

    0_1495261217438_2017-05-20_141921.png

    引入PropTypes,输入数字可以显示出来

    控制台提示已经不能从react中直接调PropTypes, 而是从prop-types这个包中引用

    这错误与你书中的错误不一样,是不是应该改成这样

    import React, { Component } from 'react'
    import elementType from 'react-prop-types/lib/elementType'
    
    class Comment extends Component {
        static propTypes = {
            comment: React.PropTypes.object
        }
        render () {
            const { comment } = this.props
            return (
                <div className="comment">
                    <div className="comment-user">
                        <span>{comment.username} </span>: 
                    </div>
                    <p>{comment.content}</p>
                </div>
            )
        }
    }
    
    export default Comment
    

  • 0
    administrators

    @labike 是的,小书需要更新一下


登录后回复
 

与 ScriptOJ 的连接断开,我们正在尝试重连,请耐心等待