Javascript 如何为'arrow'组件定义render（）？

我有以下代码：

const CoolComponent = props => { ...

我想为它定义一个渲染函数：

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

---

但当我尝试将render添加到CoolComponent时，它表示在render中需要新行或分号时出现解析错误{.CoolComponent到底是一个React组件吗？或者，如果它只是一个函数，我如何将它与一个Bar组件结合起来以重用所有的道具？

函数组件没有生命周期挂钩。因此，这里您只需使用return语句或使用括号隐式返回，而不是大括号{}和返回语句，该语句将呈现组件：

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

或者

甚至有一行与您的示例相符：

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

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

带多行代码的隐式返回：

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

您也可以阅读我的另一篇文章，解释。

您只有两个选择。 选项1：像这样使用类

类MainComponent扩展了React.Component{ 渲染{ 回来 你好，世界！ ; }

---

}您不能将render添加到无状态的react组件，只需返回jsx代码而不使用render。请重新阅读，这一点非常清楚。@Janiis:技术更正对于react来说非常重要，功能组件在技术上从来都不是无状态的，但是由于useState钩子现在是一个正式的东西，我们真的不能称它们为sta有点迂腐，但对于React和一般的技术术语来说，迂腐是确保我们不会把人搞糊涂的必要条件

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

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