#1 用 React.js 在页面上渲染标题


  • 0

    @小狮子

    content 拼写错误


  • 0

    class Header extends Component {
    render() {
    return(
    renderContent("Hello World")
    )
    }
    }
    function renderContent(par) {
    return (
    <h1>{par}</h1>
    )
    }
    ReactDom.render(
    <Header />,
    document.getElementById('root')
    )


  • 2

    有两种写法

    1. 较为简单的,直接在ReactDOM.render()方法中写我们的标签
    function renderContent (content) {
        ReactDOM.render(
            <h1>{ content }</h1>,
            document.getElementById('root')
        )
    }
    

    2.写一个类继承Component

    function renderContent(content) {
        
        class Content extends Component(
            render() {
                return (
                    <h1>{ content }</h1>
                )
            }
        )
    
        ReactDOM.render(
            <Content />,
            document.getElementById('root')
        )
    }
    

    当然所有的代码中 别忘了在 HTML 中写上你要插入的 "容器"
    <div id='root'></div>


  • 0

    在哪个页面上加这些代码,是在App.js还是Index.js脚本中写?感觉根本就没有一个html文件存在,都不知道在那个js代码中添加代码。


  • 0

    @vihcle 上面的是html,下面的是js


  • 0

    function renderContent(content) {
    class HelloMessage extends React.Component {
    render() {
    return <h1> {this.props.name}</h1>;
    }
    }
    const rootEl = document.getElementById('root')
    ReactDOM.render(<HelloMessage name={content} />, rootEl)
    }
    renderContent('Hello World');
    为什么不行呢


  • 0

    @mothwillion reactDOM 改为 ReactDOM 试一下呢


  • 0

    @tiantiyang 原来可以把 类 的继承 和 ReactDOM.render 一起放在一个函数里面啊,非常感谢!之前一直想从 Component 继承 Content 但是却不知道怎样进行,谢谢你的分享


  • 0

    @vihcle#1 用 React.js 在页面上渲染标题 中说:

    就没有一个html文件存在

    如果是自己的本地环境,在 public 里面的 index.html 中添加 root 的相关信息


  • 0

    在本地测试正确,在线上却提示错误,麻烦帮忙看一下,谢谢~~

    function renderContent (content) {
        class Content extends Component {
            render () {
                return (
                    <h1> { content } </h1>
                )
            }
        }
    
        ReactDOM.render(
            <Content />,
            document.getElementById('root')
        )
    }
    

  • 0

    对格式要求太严格了,
    稍微改点就说不行,
    不过那样感觉没办法判断对错,
    毕竟不是人去测试


  • 0

    @ScriptOJ#1 用 React.js 在页面上渲染标题 中说:

    @popwalker

    function renderContent (content) {
      ReactDOM.render(<h1>{content}</h1>, document.getElementById('root'))
    }
    
    

  • 0

    @mothwillion 大写ReactDOM


  • 0

    @Leecc title="{content}" 把双引号去掉试试


  • 0

    为什么无法通过? 本地实测是可以的

    报错信息是: _registerComponent(...): Target container is not a DOM element.

    /* 环境中已经注入了 React,ReactDOM */
    
    
    function renderContent(content) {
    	class Content extends React.Component{
      	render() {
      		return (<h1>{ this.props.content }</h1>)
      	}
    	}
    
      ReactDOM.render(
        <Content content={content} />,
        document.getElementById('root')
      )
    }
    

  • 0

    @zzc function renderContent (content) {
    var div = document.createElement('div');
    div.setAttribute('id','root')
    document.body.appendChild(div)
    // TODO
    ReactDOM.render(
    <h1>{content}</h1>,
    document.getElementById('root')
    )
    }


  • 0

    function renderContent (content) {
    // TODO
    ReactDOM.render(
    <div><h1>{content}</h1></div>, document.getElementById('root')
    )
    }
    renderContent('Hello world')
    <div id="root"></root>


  • 1

    HTML

    <div id='root'></div>
    

    JavaScript

    /* 环境中已经注入了 React,ReactDOM */
    
    function renderContent (content) {
      ReactDOM.render(<h1>{content}</h1>, document.getElementById('root'));
    }
    

  • 0

    注意<h1>{content}</h1>, <h1>和 { 之间不能留空, 不然编译不过


  • 0

    /* 环境中已经注入了 React,ReactDOM */
    
    function renderContent (content) {
      class Content extends Component {
        render () {
          return (
            <h1>{content}</h1>
          )
        }
      }
      
      ReactDOM.render(
        <Content />,
        document.getElementById('root')
      )
    }
    

登录后回复
 

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