Question

您好我尝试使用ES6在React中思考，我遇到了一个问题。看看这个例子代码es5：

＆＃13;

var Hello = React.createClass({
  render: function() {
    return (
    <div>
    	<H1 content=<P/>></H1>
    </div>
    );
  }
});

var H1 = React.createClass({
  render: function() {
    return (
    <div>
    	<h1>hello from parent </h1>
      {this.props.content}
    </div>
    );
  }
});

var P = React.createClass({
  render: function() {
    return <p>hello from children</p>;
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

＆＃13;

使用ES6类如何做到这一点？我尝试过这样的事情：但它没有核心工作。是否可以使用ES6 React Components？

Answer 1

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render(){
    return (
      <div>
        <H1>
          <P/>
        </H1>
      </div>
    );
  }
}

class H1 extends React.Component {
  render(){
    return (
      <div>
      	<h1>hello from parent </h1>
        {this.props.children}
      </div>
    );
  }
}

class P extends React.Component {
  render(){
    return (
      <p>hello from children</p>
    );
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

但是你需要先编译它，你可以使用Babel.js和其他一些软件包来使它工作，比如Gulp，Webpack或Grunt;

Answer 2

在ES6和ES5中将组件作为prop传递没有区别：

content=<P/>

虽然JSX是JavaScript（ECMAScript）的扩展，但它与您使用的版本完全无关。

如果您遇到问题，可能是因为转换中的其他内容有误。

如何将React Component作为道具发送

2 个答案: