Question

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

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

这段代码有什么问题？它很难调试我无法在控制台中看到哪些行有问题。

我何时需要使用constructor？

Answer 1

你有一些语法错误，应该是

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

可以简化为：

const HiContainer = props => <h1>Hi {props.greet}</h1>

您可能需要学习基础知识，这是箭头功能： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Answer 2

好像你正在使用功能组件，它会自动处理render方法。

代码应为：

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

如果要向组件添加生命周期方法，则需要将其转换为类组件。

Answer 3

问题是，您以错误的方式使用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

无法呈现简单的反应示例

3 个答案: