Javascript 在React 16中实现隐藏/显示
我试图在Javascript 在React 16中实现隐藏/显示,javascript,reactjs,Javascript,Reactjs,我试图在react 16中实现隐藏/显示按钮，如果我单击一个按钮，那么它应该显示Card按钮，如果我单击Card按钮，那么它应该隐藏Card按钮，我已经实现了这一点，但我使用了组件willreceivepropsprops，这在react 16中不推荐使用，我尝试了static getDerivedStateFromProps，但在handleclick中执行设置状态时会调用它 如果不使用componentwillReceiveprops 下面是我的代码 class Test extends R
react 16CardCardCard组件willreceivepropsstatic getDerivedStateFromPropshandleclick设置状态时会调用它
如果不使用componentwillReceiveprops
下面是我的代码
class Test extends React.Component {
state ={
show: false
}
show(){
this.setState({show: true})
}
render() {
return (
<div className="App">
<button onClick={this.show.bind(this)}>show the button</button>
{this.state.show && <Notification show={true}/>}
</div>
)
}
}
const style = {
marginBottom: '0.5rem',
float: 'right',
boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.1)',
marginTop: '-9px'
};
class Notification extends React.Component {
constructor(props){
super(props);
this.state ={
open: true
}
}
componentWillReceiveProps(props){
console.log('will recieve props')
this.setState({open: props.show})
}
handleClick(){
this.setState({open: false})
}
render(){
if(!this.state.open){
return null
}
return (
<div className="test">
<div>
<button onClick={()=>this.handleClick()}>Card</button>
</div>
</div>
)
}
};
ReactDOM.render(
<Test name="World" />,
document.getElementById('container')
);
类测试扩展了React.Component{
陈述={
节目：假
}
show（）{
this.setState（{show:true}）
}
render（）{
返回(
显示按钮
{this.state.show&}
)
}
}
常量样式={
marginBottom：“0.5雷姆”，
浮动：'对'，
boxShadow:'0 4px 8px 0 rgba（0,0,0,0.1）'，
marginTop:“-9px”
};
类通知扩展了React.Component{
建造师（道具）{
超级（道具）；
这个州={
开放：是的
}
}
组件将接收道具（道具）{
console.log（'将接收道具'）
this.setState（{open:props.show}）
}
handleClick（）{
this.setState（{open:false}）
}
render（）{
如果（！this.state.open）{
返回空
}
返回(
这个.handleClick（）}>卡
)
}
};
ReactDOM.render(
,
document.getElementById（'容器'）
);
不要让它变得复杂，保持简单，在父组件上使用toggleShow
，并且仅装载通知
如果show为true，将父组件中的toggleShow
作为道具传递，以便能够从子组件中切换它
class Test extends React.Component {
constructor() {
super();
this.state = { show: false };
this.toggleShow = this.toggleShow.bind(this);
}
toggleShow() {
this.setState(prevState => ({ show: !prevState.show }));
}
render() {
return (
<div className="App">
<button onClick={this.toggleShow}>show the button</button>
{this.state.show && <Notification hideNotification={this.toggleShow} />}
</div>
);
}
}
const Notification = ({ hideNotification }) => (
<div className="test">
<div>
<button onClick={hideNotification}>Card</button>
</div>
</div>
);
类测试扩展了React.Component{
构造函数（）{
超级（）；
this.state={show:false}；
this.toggleShow=this.toggleShow.bind（this）；
}
切换显示（）{
this.setState（prevState=>（{show:！prevState.show}））；
}
render（）{
返回(
显示按钮
{this.state.show&}
);
}
}
常量通知=（{hideNotification}）=>(
卡片
);
这是使用将使语法变得非常简洁的情况之一：
import React, { useState } from "react";
import ReactDOM from "react-dom";
const Test = () => {
const [show, setShow] = useState(false)
return (
<div className="App">
<button onClick={() => { setShow(true) }}>show the button</button>
{
show &&
<Notification handleClick={() => { setShow(false) }}/>
}
</div>
)
}
const Notification = ({handleClick}) => (
<div className="test">
<div>
<button onClick={handleClick}>Card</button>
</div>
</div>
)
import React，{useState}来自“React”；
从“react dom”导入react dom；
常数测试=（）=>{
const[show，setShow]=useState（false）
返回(
{setShow（true）}}>显示按钮
{
展示&&
{setShow（false）}}/>
}
)
}
常量通知=（{handleClick}）=>(
卡片
)
但实质与之类似。我正在编写两个解决方案，一个使用“开放状态和getDerivedStateFromProps生命周期方法”，另一个不使用“开放状态和getDerivedStateFromProps生命周期方法”
解决方案1（具有打开状态和getDerivedStateFromProps）：
类测试扩展组件{
陈述={
节目：假
}
建造师（道具）{
超级（道具）；
this.closeShow=this.closeShow.bind（this）；
}
show（）{
this.setState（{show:true}）
}
render（）{
返回(
显示按钮
{this.state.show&}
)
}
闭门秀（e）{
e、 预防默认值（）；
this.setState（{show:false}）；
}
}
和通知组件，如下所示：
class Notification extends Component {
constructor(props){
super(props);
this.state ={
open: true
}
}
static getDerivedStateFromProps(nextProps, prevState){
if (nextProps.show !== prevState.open) {
return {open: nextProps.show};
}
return null;
}
render(){
const {onClose} = this.props;
if(!this.state.open){
return null
}
return (
<div className="test">
<div>
<button onClick={onClose}>Card</button>
</div>
</div>
)
}
}
类通知扩展组件{
建造师（道具）{
超级（道具）；
这个州={
开放：是的
}
}
静态getDerivedStateFromProps（下一步，上一步）{
如果（nextrops.show！==prevState.open）{
返回{open:nextrops.show}；
}
返回null；
}
render（）{
const{onClose}=this.props；
如果（！this.state.open）{
返回空
}
返回(
卡片
)
}
}
解决方案2（无打开状态和getDerivedStateFromProps）
只有通知组件需要更改，如图所示：
class Notification extends Component {
render(){
const {show, onClose} = this.props;
if(!show){
return null
}
return (
<div className="test">
<div>
<button onClick={onClose}>Card</button>
</div>
</div>
)
}
}
类通知扩展组件{
render（）{
const{show，onClose}=this.props；
如果（！show）{
返回空
}
返回(
卡片
)
}
}
对于解决方案2，我们可以使用无状态组件，因为没有要管理的状态，与有状态组件相比，无状态组件可以快速呈现。无状态组件的代码如下所示：
const Notification = function(props) {
const {show, onClose} = props;
if(!show){
return null
}
return (
<div className="test">
<div>
<button onClick={onClose}>Card</button>
</div>
</div>
)
}
const Notification=函数（道具）{
const{show，onClose}=props；
如果（！show）{
返回空
}
返回(
卡片
)
}
最好遵循第二种解决方案，因为当click按钮的显示状态由测试组件的“show”状态变量管理时，click按钮的隐藏状态也必须由测试组件的“show”状态变量管理
我给出解决方案1只是为了了解getDerivedStateFromProps生命周期方法。是否有其他方法不在props中传递函数。
const Notification = function(props) {
const {show, onClose} = props;
if(!show){
return null
}
return (
<div className="test">
<div>
<button onClick={onClose}>Card</button>
</div>
</div>
)
}