Question

我的代码出了什么问题？我在jsbin的控制台中看不到任何错误。

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（）中呈现多个组件？

Answer 1

有一些小的语法错误阻碍了你。类的小写，用于命名组件的大写，以及关闭要渲染的组件。以下代码适用于您的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')
);

Answer 2

首先，您必须使用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">。

为了在react中呈现多个组件，你必须用单个父组件包装它们，例如：

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

P.S ：另外，正如@ alexi2所说：class SomeComponent不是Class SomeComponent。

Answer 3

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

另请注意，我使用大写S。

命名了班级

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'));

React hello world不适用于ES6

3 个答案: