React return返回值要不要加括号的问题以及扩展

最新推荐文章于 2024-04-28 09:21:09 发布

胡聊前端

最新推荐文章于 2024-04-28 09:21:09 发布

阅读量3.3k

点赞数 1

分类专栏： react

本文链接：https://blog.csdn.net/weixin_43459866/article/details/117279110

版权

1 篇文章 0 订阅

订阅专栏

在react组件中返回JSX时，我们一般会这样写：

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

如果JSX标签仅有一行，也可以省略括号。像这样

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

这是React官方的写法。

但实际上，多行也可以不加括号，但return后边不可以有换行，然而JSX可以有。

function Square(props) {
  return <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
}

但显然这样写看起来不大优雅。但也是仅仅不够美观而已。其实还有一种写法，就是使用<React.Fragment>

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

以上可以支持多个子节点。而React.Fragment是不会渲染出任何html标签的。

<React.Fragment>可以所缩写为一对空标签，这时候如果去掉括号，感觉就和括号的作用差不多。

render() {
  return <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
}

实际上，在react 16以后，得益于fiber，return本身可以返回一个数组，也就是所谓返回多个元素：

function App() {
  return [
    <div className="foo">foo</div>, 
    <div className="bar">bar</div>
  ];
}

但这样有个小小的问题，就是在TS中，会报错return type 'Element[]' is not a valid JSX element 因为区别于上边提到的情况，此时真的返回了一个数组，这与react实际需要的返回值是不匹配的。

最后，由于箭头函数可以不写return默认返回箭头后边的表达式，且可以折行。即：

// 类似于这样
export const getDataFromApi = () =>
  service({
    url: `/api/resource`,
    method: 'get'
  });

所以我们可以还可以这样写JSX

// 不加括号，同时也保证了代码整洁
const App = () => 
    <div className="foo">
      <div>bar</div>
    </div>

export default App;

以上。

关注