Reactjs道具不能正常工作

时间:2017-07-20 10:22:03

标签: javascript reactjs

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。为什么不在这里?

2 个答案:

答案 0 :(得分:1)

您应该在Function:

之后定义组件的名称
function Works(props) {
    return <h1 > Hello, { props.name } < /h1>;
}

希望它有所帮助!

答案 1 :(得分:1)

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

/*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')
);