Question

我是React的新手，需要一些帮助。我正试图将这个Facebook的官方例子重写为ES6中的一些东西：

http://codepen.io/gaearon/pen/rrJNJY?editors=0010#0

我的代码如下所示：

class Person extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                <h3>{this.props.user.name}</h3>
                <h4>{this.props.user.surname}</h4>
                <h4>{this.props.user.age}</h4>
            </div>
        )
    }
}

class VisualAppearance extends Component {
    render() {
        return(
          <div>
              <p>{this.props.user.visuals.eyes}</p>
              <p>{this.props.user.visuals.height}</p>
              <p>{this.props.user.visuals.hair}</p>
          </div>
        );
    }
}

class CreatePerson extends Component {
    render() {
        return(
            <div>
                <h1>Personal Info: </h1>
                <Person user={this.props.user}/>
                <h1>Visual Appearance: </h1>
                <VisualAppearance user={this.props.user}/>
                <h1>Time Created:</h1>
                <p>{this.props.dateCreated}</p>
            </div>
        );
    }
}

var use = {
    user: {
        name: 'Dude',
        surname: 'Dude Surname',
        age: 30,
        visuals: {
            eyes: 'blue',
            height: 180,
            hair: 'dark'
        }
    },
    dateCreated: new Date()
}

ReactDOM.render(
    <CreatePerson name={use.user.name}
    surname={use.user.surname} age={use.user.age} eyes={use.user.visuals.eyes} height={use.user.visuals.height}
                  hair={use.user.visuals.height} date={use.user.dateCreated}
    />
    , document.getElementById('project'));

我收到以下错误：Cannot read property 'name' of undefined

如果我将此更改为this.props.user它会通过，但会在姓氏上报告与上述相同的错误。

在提供的链接中有：props.user.avatarUrl，因此它是对象的嵌套结构。

如何在React的ES6类中完成此工作并将对象的属性（如this.props.sth.sthElse.sthElse1）嵌套？

Answer 1

CreatePerson需要一个名为user的属性：

class CreatePerson extends Component {
    render() {
        return(
            <div>
                <h1>Personal Info: </h1>
                <Person user={this.props.user}/>            // <====
                <h1>Visual Appearance: </h1>
                <VisualAppearance user={this.props.user}/>  // <====
                <h1>Time Created:</h1>
                <p>{this.props.dateCreated}</p>
            </div>
        );
    }
}

你没有传递它。您传递的是name，surname和其他一些，但不是user。

如果删除所有这些单独的属性并将其传递给user，则它会起作用：

ReactDOM.render(
    <CreatePerson user={use.user} />
    , document.getElementById('project'));

示例：

class Person extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                <h3>{this.props.user.name}</h3>
                <h4>{this.props.user.surname}</h4>
                <h4>{this.props.user.age}</h4>
            </div>
        )
    }
}

class VisualAppearance extends React.Component {
    render() {
        return(
          <div>
              <p>{this.props.user.visuals.eyes}</p>
              <p>{this.props.user.visuals.height}</p>
              <p>{this.props.user.visuals.hair}</p>
          </div>
        );
    }
}

class CreatePerson extends React.Component {
    render() {
        return(
            <div>
                <h1>Personal Info: </h1>
                <Person user={this.props.user}/>
                <h1>Visual Appearance: </h1>
                <VisualAppearance user={this.props.user}/>
                <h1>Time Created:</h1>
                <p>{this.props.dateCreated}</p>
            </div>
        );
    }
}

var use = {
    user: {
        name: 'Dude',
        surname: 'Dude Surname',
        age: 30,
        visuals: {
            eyes: 'blue',
            height: 180,
            hair: 'dark'
        }
    },
    dateCreated: new Date()
}

ReactDOM.render(
    <CreatePerson user={use.user} />
    , document.getElementById('project'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="project"></div>

通过ReactJS，ES6示例中的组件传递属性

1 个答案: