在react.js中实现render方法

Question

const CommentForm = React.createClass({
  render: function() {
    return (
      <div className="commentForm">
      </div>
    );
  }
});

const Todo = ({ onClick, completed, text }) => (
  <li
    onClick={onClick}
    style={{
      textDecoration: completed ? 'line-through' : 'none'
    }}
  >
    {text}
  </li>
)

为什么会这样，何时必须实现render方法？

Answer 1

假设我们有一个React组件，它使用单个道具向某人问好。

class Hello extends React.Component {
    render() {
        return (
            <span>Hello, {this.props.name}</span>
        );
    }
}

正如您可能知道的，这个组件不需要任何内部状态就能正常工作。它只需要一个道具就能完成它的工作。React允许我们将这样的组件定义为无状态函数，这些函数只需在给定一些道具的情况下返回标记即可。

function Hello(props) {
    return <span>Hello, {props.name}</span>;
}

我们可以使用ES6语法来代替使用箭头函数，它允许我们隐式地返回标记：

const Hello = (props) => (<span>Hello, {props.name}</span>);

const Hello = ({name}) => (<span>Hello, {name}</span>);