Question

这是一个容器：

render() {
    return (
      <div>
        <ul className="list-group" id="contact-list">
          {this.returnContactList().map(
            (contact) =>
              <li key={contact.date.N} className="list-group-item">
                <ContactCard contact={contact} onFormSubmit={this.handleSubmit} summaryHidden={this.state.summaryHidden} />
              </li>
          )}
        </ul>
      </div>
    );
  }

这就是我的组成部分：

import React from 'react';
import '../Contacts.css';
const ContactCard = ({ contact, onFormSubmit, summaryHidden }) => {

    return (
        <div>
            <button onClick={onFormSubmit}>submit</button>
            <div style={{ display: summaryHidden ? 'block' : 'none' }}>
                Summary
            </div>
        </div>
    )
}

export default ContactCard;

这将显示联系人列表。但是，当我单击按钮时，文本Summary将应用于所有组件。我只想将其限制为单个组件。该怎么做？

Answer 1

您的容器中只有一个“ summaryHidden”变量。如果希望将摘要隐藏在某些组件中而不是其他组件中，则每个组件都需要一个单独的组件（也许将它们存储在地图的联系人对象中）。

反应：将动作限制为单个组件

1 个答案: