如何在 React JS 中的组件中传递道具答案

【问题标题】：How to pass props in my components inReactJS如何在 React JS 中的组件中传递道具
【发布时间】：2018-08-28 20:14:04
【问题描述】：

您好，我有一个折叠包装器，默认情况下它的显示状态为真（我无法更改）还有一个模态组件，它在打开时需要显示 False。我认为将 defaultOpen 道具设置为“false”会将 Display 设置为 false。但它不起作用。我做错了什么？这是代码：

我的折叠包装：

import React, { Component } from "react";
import ChevronUp from "react-feather/dist/icons/chevron-up";
import ChevronDown from "react-feather/dist/icons/chevron-down";
import { Collapse } from "reactstrap";
import "./style.scss";

class CollapseWrapper extends Component {
  constructor(props) {
    super(props);

    this.state = {
      display:
        props.defaultOpen === undefined ? true : props.defaultOpen,
      title: this.props.title,
    };
  }

  toggleContainer = () => {
    this.setState(prevState => ({
      display: !prevState.display,
    }));
  };

  render() {
    const { display, title } = this.state;
    return (
      <div>
        <button type="button" onClick={this.toggleContainer}>
          <div className="title-container">
            {display ? (
              <ChevronUp className="chevron" />
            ) : (
              <ChevronDown className="chevron" />
            )}

            <h2>{title}</h2>
          </div>
        </button>
        <Collapse isOpen={this.state.display}>
          {this.props.children}
        </Collapse>
      </div>
    );
  }
}

export default CollapseWrapper;

我的模态：

import React from "react";
import { Modal } from "reactstrap";
import CollapseWrapper from "./CollapseWrapper";

class Mymodal extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const { isOpen } = this.props;
    return (
      <Modal size="xxl" isOpen={isOpen} toggle={this.close}>
        <CollapseWrapper defaultOpen="false" title="More détails">
          Some content...
        </CollapseWrapper>
      </Modal>
    );
  }
}

export default Mymodal;

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您应该在花括号 {} 内传递布尔值，而不是在字符串中。正确defaultOpen={false} 错了defaultOpen="false"

<CollapseWrapper defaultOpen={false} title="More détails">
   Some content...
</CollapseWrapper>

【讨论】：

【解决方案2】：

在按钮的 onClick 事件中使用箭头功能

替换

onClick={this.toggleContainer}

到

onClick={() => this.toggleContainer()}

【讨论】：

这两个选项做同样的事情

【解决方案3】：

我认为，您可以使用组件生命周期方法componentWillReceiveProps(nextProps) 来解决这个问题。在 componentWillReceiveProps 时再次设置您的 display 状态。

解决办法：

componentWillReceiveProps(nextProps) {
   if (nextProps.defaultOpen !== this.state.display) {
     this.setState({ ...this.state, display: nextProps.defaultOpen });
   }
}

【讨论】：

componentWillReceiveProps 已弃用
@Charlote22 是的，刚才我检查了。生命周期挂钩已弃用。请检查我的另一个答案。希望对你有帮助
是的，它适用于花括号内的错误。非常感谢！我得调查一下……