javascript - 无法呈现简单的 react 示例

const HiContainer => (props) {
  render{
    return(
       <h1>Hi {this.props.greet}</h1>
    )
  }
}

ReactDOM.render(
  <HiContainer greet="hi"/>
  document.getElementById('root')
);

此代码有什么问题？很难调试，我看不到控制台中哪几行有问题。

另外，什么时候需要使用constructor？

最佳答案

问题是，您以错误的方式使用了arrow函数。

应该是这样的const HiContainer = () => {}。
试试这个，它将起作用：

const HiContainer = (props) => {
    return(
       <h1>Welcome {props.greet}</h1>
    )
}

ReactDOM.render(
    <HiContainer greet="hi"/>,
    document.getElementById('app')
);

使用constructor时需要stateful components，并将信息存储在状态变量中，因为使用的是stateless components，所以不需要constructor。

检查jsfiddle以获取工作示例：https://jsfiddle.net/ej2szg3a/

检查此状态是否为无状态功能组件：https://www.reactenlightenment.com/react-state/8.4.html

关于javascript - 无法呈现简单的 react 示例，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41689981/