Question

我正在尝试将数据“ template_titles”传递给子组件并将其显示在选项下拉列表中。只是尝试console.log数据以确保其通过。当前遇到未定义属性道具的问题。

父组件

    render() {
    if (!this.props.show) {
        return null;
    }

    const template_titles = this.state.email_template.map((a) => a.title);
    console.log(template_titles);

    return (
        <div className='compose-email'>
            <div className='directory'>
                <div className='background' />
                <div className='box'>
                    <ion-icon
                        id='close-email'
                        name='close'
                        onClick={this.onClose}
                    ></ion-icon>
                    <ion-icon
                        id='square-email'
                        name='square'
                        onClick={this.onClose}
                    ></ion-icon>
                    <h1 className='candidate-name-compose-email'>
                        Candidate Name
                    </h1>
                    <hr></hr>
                    <h1 className='compose-email-title-compose-email'>
                        Compose Email
                    </h1>
                    <ComposeEmailForm
                        handleCompose={this.sendNewEmail}
                        template_titles={this.template_titles}
                    />
                </div>
                <ToastContainer className='toast-container' />
            </div>
        </div>
    );
}

子组件

    export default function ComposeEmailForm({ handleCompose }) {

console.log(this.props.template_titles);

return (
    <div className='container'></div>
);

}

Answer 1

尝试以下方法：

export default function ComposeEmailForm({ handleCompose, template_titles }) {

console.log(template_titles);

return (
    <div className='container'></div>
);

当组件是函数而不是类时，不能使用this。

通过时，您还需要放下this：

 <ComposeEmailForm
    handleCompose={this.sendNewEmail}
    template_titles={template_titles}
 />

因为您是在render函数中定义的。

Answer 2

实际上，在函数组件中，您并不太使用this，尤其是当您在参数的括号中破坏props时，您可以使用如下所示的道具：

export default function ComposeEmailForm({ handleCompose, template_titles }) {

  console.log(template_titles, handleCompose);

  return (
    <div className='container'></div>
  );
};

将数据从父类传递到子函数-props未定义

2 个答案: