如何为“ arrow”组件定义render（）？

Question

我有以下代码：

const CoolComponent = props => { ...

，我想为其定义一个render()函数：

render() {
    console.log('Hello world');
    return (
      <Bar
        foo={true}
        {...propz}
      />);

但是当我尝试将render()添加到CoolComponent时，它说render() {中存在解析错误（期待换行或分号）。毕竟CoolComponent是React组件吗？或者，如果它只是一个函数，我如何将其与 Bar 组件结合以重用所有道具？

Answer 1

功能组件没有生命周期挂钩。因此，在这里，您只使用return语句或使用括号()的隐式return而不是大括号{}和return语句，这将呈现组件：

const CoolComponent = props => {
   return (
     <Bar
       foo={true}
       {...propz}
     />
   )
}

前面的代码示例中的道具有问题。参见下面的正确示例。

此外，当您拥有价值为true的道具时，就可以简单地使用道具。这就是我会简单使用的：

const CoolComponent = props => {
  const { foo, ...rest } = props
  return <Bar foo {...rest} />
}

或者，

const CoolComponent = ({foo, ...rest}) => {
  return <Bar foo {...rest} />
}

甚至您的示例仅一行：

const CoolComponent = ({foo, ...rest}) => <Bar foo {...rest} />

单行语句仅在没有多行代码时才有效。

---

含多行代码的隐式返回：

const CoolComponent = ({foo, ...rest}) => (
   <div>
    <Bar foo {...rest} />
   </div>
)

您还可以阅读我的另一篇有关implicit and explicit return的文章。

Answer 2

您只有两个选择。 选项1：使用此类。

class MainComponent extends React.Component{
  render(){
    return(
      <div>Hello World!</div>
    );
  }
}

选项2：使用类似的功能。

const MainComponent = props => {
  return (
    <div>Hello World!</div>
  )
}