Javascript 在React中将方法从一个组件移动到另一个组件，并且仍然能够在原始组件中使用

我正在使用React with ES6创建一个小型联系人应用程序。我在一个组件的渲染函数中显示了一些数据-原始结构见下面问题的链接

然而，因为我也在同一页上放置表单，并且我需要更新状态中的数据，所以我必须将数据移动到更高级别的组件

现在我在遍历组件时遇到了问题，因此我的原始联系人列表显示在左侧。我不得不删除联系人列表组件上渲染函数中的大部分内容，因为它完全破坏了构建

首先，这是带有表单的地址簿组件——它正在工作，从state中提取最初的3个联系人，然后将新联系人从表单集中到数组中。（这里仍然需要清理代码以使UI正常工作…）

从“React”导入React；
从“./contact list.jsx”导入联系人列表；
从“./contact form.jsx”导入ContactForm；
从“/short contact.jsx”导入ShortContact；
类AddressBook扩展了React.Component{
构造函数（）{
“严格使用”；
超级（）；
此.state={
真的,，
联系人：[
{
id:1，
fName：“aaa”，
名称：“AAAA”，
imgUrl:“http://brainstorminonline.com/wp-content/uploads/2011/12/blah.jpg",
电子邮件：“aaa@aaaa.com",
电话：“9999999999”
},
{
id:2，
fName:“bbbbb”，
名称：“bbbbbbb”，
imgUrl:“https://media.licdn.com/mpr/mpr/shrinknp_200_200/bbb.jpg",
电子邮件：“bbb@bbb-bbb.com“，
电话：“8888888888”
},
{
id:3，
fName：“数字”，
名字：“三”，
imgUrl:“http://3.bp.blogspot.com/-iYgp2G1mD4o/TssPyGjJ4bI/AAAAAAAAGl0/UoweTTF1-3U/s1600/Number+3+着色+页面+14.gif“，
电子邮件：“three@ccccc.com",
电话：“333-333-3333”
}
];
};
}
render（）{
“严格使用”；
返回(
创建新联系人
);
}
_addContact（fName、lName、company、email、phone、imgURL）{
“严格使用”；
常数触点={
id:this.state.contacts.length+1，
fName，
名字，
公司，
电子邮件，
电话，
伊姆古尔
};
this.setState（{contacts:this.state.contacts.concat（[contact]）}）；
}
_getContacts（）{
“严格使用”；
返回contactList.map（（联系人）=>{
“严格使用”；
返回(
)
});
}
_getContactsTitle（contactCount）{
“严格使用”；
如果（contactCount==0）{
返回“无联系人”；
}否则如果（contactCount==1）{
返回“1联系人”；
}否则{
返回`${contactCount}个联系人`；
}
}
}
导出默认地址簿；

但是，下面两种方法_getContacts和_getContactsTitle是我的ContactForm组件中需要的方法，即：

import React from 'react';
import ShortContact from './short-contact.jsx';




class ContactList extends React.Component {



render() {

    const contacts  = this._getContacts();


    return (
        <div>
            <h3>List of Contacts</h3>
            <h4 className="contact-count">{this._getContactsTitle((contacts.length))}</h4>
            <ul className="contact-list">
                {contacts}
            </ul>
        </div>
    );
    }
}

export default ContactList;

从“React”导入React；
从“/short contact.jsx”导入ShortContact；
类ContactList扩展了React.Component{
render（）{
const contacts=this._getContacts（）；
返回(
联系人名单
{this._getContactsTitle（（contacts.length））}

{联系人}

);
}
}
导出默认联系人列表；

通过

定义联系人以及

的常量会破坏应用程序，因为正如您所看到的，它引用了其他组件中的{getContactTitle方法以及{getContacts}方法中的{contacts}

我猜我需要做一些事情，比如将它们包装成函数并传递它们——但我已经转过身来，不太明白这在React中是如何工作的。欢迎任何帮助。谢谢
 您需要通过道具向下传递联系人，而不是尝试在父级中建立要向下传递的联系人列表。我的意思是这个

通讯录

render() {
    "use strict";
    let contacts  = this._getContacts();
-----------^---------------^----------- get the list in the parent
    return (
        <div className="row address-book">
            <div className="col-md-6">
                <ContactList contacts={contacts} />
-------------------------------^-----------^---- important part here
            </div>
            <div className="col-md-6">
                <button className='btn' id="contact-submit-button" type="submit" value="Create Contact">Create New Contact </button>
                <div>
                    <ContactForm  addContact={this._addContact.bind(this)}/>
                </div>
            </div>
        </div>

    );
}

再次感谢。这些道具正是我需要的，我知道这一点，但看不见。使用新的结构和语法，我一次只能在脑海中记住这么多。这里的标题代码也很棒。最后，我将_getContacts方法移回了我的列表组件，因为我可以使用道具访问数据，这允许我使用它来映射和呈现列表。
render() {
    "use strict";
    let contacts  = this._getContacts();
-----------^---------------^----------- get the list in the parent
    return (
        <div className="row address-book">
            <div className="col-md-6">
                <ContactList contacts={contacts} />
-------------------------------^-----------^---- important part here
            </div>
            <div className="col-md-6">
                <button className='btn' id="contact-submit-button" type="submit" value="Create Contact">Create New Contact </button>
                <div>
                    <ContactForm  addContact={this._addContact.bind(this)}/>
                </div>
            </div>
        </div>

    );
}

render() {
    let {contacts} = this.props;
------------^--------------^---- its in the props now
    let title = contacts.length > 1 ? `${contacts.length} contacts` : contacts.length === 1 ? '1 contact' : 'No Contacts';
    return (
        <div>
            <h3>List of Contacts</h3>
            <h4 className="contact-count">{title}</h4>
            <ul className="contact-list">
                {contacts}
            </ul>
        </div>
    );
    }
}

this.setState({ contacts: this.state.contacts.push(contact) });