console.log在无状态函数表达式中？

Question

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

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

Answer 1

它因为你隐式返回console.log而中断，你应该返回一些有效的jsx内容。

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

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

Answer 2

无需使用大括号并添加返回符即可更改组件的结构。您可以这样做：

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

Answer 3

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

请记住，在功能组件中没有否渲染方法。 您的JSX应该写在函数的return部分中。那不是反应的具体情况。这就是箭头函数本身的行为。 祝您好运：)