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

太过爱你忘了你带给我的痛 2022-10-16 00:46 236阅读 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;

以上。