[英]How to pass props in my components inReactJS
Hello I have a collapse wrapper which has its Display state as true by default (I can't change that) And a modal component which needs the display False when it opens. 您好,我有一个折叠包装器,默认情况下其显示状态为true(我无法更改),而模态组件在打开时需要显示False。 I thought that setting the defaultOpen props as "false" would set the Display to false.
我认为将defaultOpen道具设置为“ false”会将Display设置为false。 But it doesn' work.
但这行不通。 What do I do wrong ?
我做错了什么? Here is the code :
这是代码:
My Collapse wrapper : 我的折叠包装器:
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;
My modal : 我的模态:
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;
use arrow function in onClick event on your button 在按钮上的onClick事件中使用箭头功能
replace 更换
onClick={this.toggleContainer}
to 至
onClick={() => this.toggleContainer()}
You should pass boolean value inside the curly braces {} not in string. 您应该在大括号{}中传递布尔值,而不是字符串。 Correct
defaultOpen={false}
wrong defaultOpen="false"
正确的
defaultOpen={false}
错误的defaultOpen="false"
<CollapseWrapper defaultOpen={false} title="More détails">
Some content...
</CollapseWrapper>
I think, you can use component life cycle method componentWillReceiveProps(nextProps)
to solve this issue. 我认为,您可以使用组件生命周期方法
componentWillReceiveProps(nextProps)
来解决此问题。 Set your display
state again when componentWillReceiveProps. 当componentWillReceiveProps时,再次设置
display
状态。
Solution: 解:
componentWillReceiveProps(nextProps) {
if (nextProps.defaultOpen !== this.state.display) {
this.setState({ ...this.state, display: nextProps.defaultOpen });
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.