技术

每日一问---React中render函数

React中关于render函数返回一个元素

问题需求 
当在render返回的方法中，需要返回多个根节点时候会如何
关于Jsx

由于react jsx是javascript的语法拓展，其本质是 通过React.createElement(type, config, children)来返回一个React元素

class App extends React.Component {
  render(){
    return (
      <div>
      hello
      </div>
    );
  }
}

转变这样

_createClass(App, [{
    key: 'render',
    value: function render() {
      return React.createElement("div", null, "hello");
    }
}]);

如果写成多个元素

class App extends React.Component {
  render(){
    return (
      <div>
      hello
      </div>
      <h1>more</h1>
    );
  }
}

其将会装换为

_createClass(App, [{
    key: 'render',
    value: function render() {
      return React.createElement("div", null, "hello");
      return React.createElement("h1", null, "more");
    }
}]);

其实际上不会转换成功(将会报错 Adjacent JSX elements must be wrapped in an enclosing tag)其方法return两次，这显然是错误

解决方法
1.父元素包裹 
render() {
  return (
    <div>
      <h1>foo</h1>
      <h2>bar</h2>
    </div>
  );
}
2.采用 Fragment

在 React v16.2+以上版本中可以才用Fragment片段的方式

render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
}
3.短语法 <> </> 
render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    ); 
}


jsx部分 其转换为
React.createElement(React.Fragment, null, 
    React.createElement("td", null, "Hello"), 
    React.createElement("td", null, "World")
);

可以看出 其实际上是React.Fragment的语法糖 可以写成

render() {
  return (
    <React.Fragment>
    <td>Hello</td>
    <td>World</td>
    </React.Fragment>
  );
}
4.返回数组

在 React v16.0+以上版本中可以才用返回数组的方式

render(){
    return [<div key={0}>hello</div>,<div key={1}>world</div>]
}

其会转化为

return [
    React.createElement("div", {key: 0}, "hello"),
    React.createElement("div", {key: 1}, "world")
];
参考资料

Adjacent JSX error

React fragments

Recommended Posts