Question

var Works = function welcome(props) {
  return <h1> Hello, {props.name} </h1>;
}

/*function welcome() {
  return <h1>Hello, {this.props.name}</h1>;
}*/

const element = (<div>
    <Works name="Luffy" />
</div>);

ReactDOM.render(
  element,
  document.getElementById('root')
);

如果我将Works组件替换为没有传递道具的注释部分，则会出错，我需要知道为什么它会在使用类时发生，我们直接使用this.props。为什么不在这里？

Answer 1

您应该在Function：

之后定义组件的名称

function Works(props) {
    return <h1 > Hello, { props.name } < /h1>;
}

希望它有所帮助！

Answer 2

因为在这里你没有叫道具，

/*function welcome() {
  return <h1>Hello, {this.props.name}</h1>;
}*/

代码应该是这样的

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

这里的完整代码

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Luffy" />;

ReactDOM.render(
  element,
  document.getElementById('root')
);

Reactjs道具不能正常工作

2 个答案: