Почему структура объекта JavaScript отличается при передаче в качестве опоры?

Question

, поэтому у меня есть состояние, сохраненное в моем приложении. js для моего приложения React, которое имеет такую ​​структуру:

state = {
    A: "Some text.",
    B: {
        C: "Some extra text."
    }
}

И я хочу напечатать значение C в компоненте под названием Header . Я передал его так:

<React.Fragment>
    <Header headerTitle= {this.state.B.C} />
</React.Fragment>

И в компоненте заголовка я зарегистрировал его, чтобы посмотреть, как он выглядит:

class Header extends Component {
    render = () => {
        const header = this.props
        console.log(header)
        return (
            <h2>{header}</h2>
    }

На консоли это выглядело так:

{C: "Some extra text."}

Итак, у меня вопрос, почему это так? Почему я не могу получить значение C напрямую?

Answer 1

Вы не разрушаете опору, чтобы получить headerTitle. Props - это объект, который содержит все объекты свойств, которые вы передаете от родительского

Ваш код должен быть:

const header = this.props.headerTitle;

или вы можете использовать синтаксис деструктивного присваивания ES6, как показано ниже:

const { headerTitle } = this.props;

Чтобы прояснить вашу путаницу, допустим, вы передаете два свойства своему дочернему компоненту:

<React.Fragment>
    <Header headerTitle= {this.state.B.C} headerContent= {'Blah Blah Blah'} />
</React.Fragment>

Теперь в вашем дочернем компоненте, очевидно, const header = this.props не будет работать. Это должно быть:

const { headerTitle, headerContent } = this.props;

См. Ссылку ниже, чтобы понять Синтаксис разрушения присваивания : ссылка