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

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>