为什么在无状态函数表达式中破坏“ console.log”？

Question

我确定这只是语法问题。如何console.log在无状态函数表达式内？

const Layer = (props) => (
  console.log(props); //breaks
)

Answer 1

无需更改组件的结构即可使用花括号并添加返回值。你可以做：

const Layer = (props) => console.log(props) || (
  ...whatever component does
);

Answer 2

const StatelessComponent = props => {
   console.log(props);
   return (
      <div>{props.whatever}</div>
   )
}

请记住，在功能组件中没有渲染方法。你的 JSX 应该写在函数的返回部分。那不是反应特定的情况。这就是箭头函数本身的行为。祝你编码好运:)

Answer 3

它会中断，因为您隐式返回未定义的调用结果console.log，但您应该返回有效的反应组件

添加大括号并显式返回组件：

const Layer = (props) => { 
  console.log(props);
  return <div/> //return a valid React component
};