為什么在無狀態函數表達式中破壞“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並且您應該返回一些有效的 jsx 內容。

添加大括號並顯式返回組件：

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