React hello world不适用于ES6

我的代码有什么问题？我在jsbin的控制台中看到没有错误。React hello world不适用于ES6

http://jsbin.com/susumidode/edit?js,console,output

Class secondComponenent extends React.Component { 
    render(){ 
    return (
     <p>My id is: {this.props.id}</p> 
    ); 
    } 
} 


React.render(
    <secondComponenent id="abc">, 
    document.getElementById('react_example') 
);

以及如何在React.render渲染多个组件（）？

来源

2016-09-20 dfox

类名必须以大写字母开头。 –

http://imgur.com/a/KuPUr – Quentin

@Whitcik没有解决问题 – dfox

有一些小的语法错误让你失望。小写的类，大写的命名组件，并关闭要渲染的组件。下面的代码在你的JSBin中工作。

class SecondComponent extends React.Component { 
    render(){ 
    return (
     <p>My id is: {this.props.id}</p> 
    ); 
    } 
} 


React.render(
    <SecondComponent id="abc" />, 
    document.getElementById('react_example') 
);

来源

2016-09-20 09:45:40 alexi2

如果您想使用道具，您（可能）需要一个构造函数（请参阅下面的评论）。

import React, { Component } from 'react'; 
import { render } from 'react-dom'; 

class SecoundComponent extends Component { 
    constructor(props) { 
    super(props); 

    this.props = props; 
    } 

    render() { 
    return (
     <p>My id is: {this.props.id}</p> 
    ) 
    } 
} 

render(<SecoundComponent id="123" />, document.getElementById('react_example'));

另外请注意，我命名类SecoundComponent，资本S.

来源

2016-09-20 09:13:03

这是不正确的。你需要使用构造函数来使用'this.state'，但道具自动应用。 –

你说得对，@JoshuaComeau，但是如果你想在构造函数中使用道具，那么你需要使用'super（道具）'。请参阅http://codepen.io/tomekbuszewski/pen/XjNWqq?editors=0010 –

True - 如果您定义了自己的构造函数，则需要确保“Component”的原始构造函数仍然接收道具。否则，你的构造函数会覆盖原来的构造函数，并且'this.props'永远不会被设置。 –

首先，你必须使用ReactDOM来渲染组件的浏览器不React。你的代码是：

React.render(
    <secondComponenent id="abc" />, 
    document.getElementById('react_example') 
);

但在最新版本的React（0.14以上），它必须是：

ReactDOM.render(
    <secondComponenent id="abc" />, 
    document.getElementById('react_example') 
);

为了使它工作，你可以将此library添加到您的HTML。

其次，当它没有像这样的子组件时，你必须关闭你的组件：<secondComponent id="abc" />，你的文字是这样的：<secondComponent id="abc">。

为了呈现多个成分发生化学反应，你有这样的例如单亲组件包起来：

ReactDOM.render(
    <div> 
     <firstComponenent id="abc" /> 
     <secondComponenent id="abc" /> 
    </div>, 
    document.getElementById('react_example') 
);

P.S：此外，如@ alexi2说：class SomeComponent不Class SomeComponent。

来源

2016-09-20 09:25:50 sehrob

不，reactDOM是不需要的，看看http://jsbin.com/cuneha/1/edit?js,output – dfox

是的，你是对的，如果'react'版本低于'0.14'则不需要。但是最近的版本无论如何都必须使用'ReactDOM'。也许帮助：http://stackoverflow.com/questions/33007402/is-there-any-difference-between-react-render-and-reactdom-render。 – sehrob

谢谢不知道！ – dfox

React hello world不适用于ES6

回答

相关问题