ReactJS网站实现错误，返回多个元素

Posted 2021-03-27

我尝试了reactjs.org下面的代码示例01并且它工作正常，但是当我尝试添加多个元素（示例02）以返回此组件时它不起作用。

例01

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }


  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e( 
        'button',
          { onClick: () => this.setState({ liked: true }) },
        'Like'  
    );
  }
}

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

例02

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }


  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
        <div> 
          <a href="#" >Login</a>
          <a href="#" >Logout</a>
        </div>
    );
  }
}

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

PS：我是反应犹他的新手，并感谢任何帮助。谢谢。

答案

你用错误的语法调用createElement;这是签名：

React.createElement(
  type,
  [props],
  [...children]
)

在你的情况下，正确的电话会是

return e(
  'div',
  null,
  [
    e('a', { href: '#' }, 'Login'), 
    e('a', { href: '#' }, 'Logout')
  ]
);

但是，您可以直接返回html而无需使用createElement，只需将渲染更改为：

return (
  <div> 
    <a href="#" >Login</a>
    <a href="#" >Logout</a>
  </div>
);