点击一个按钮来显示和隐藏细节

Question

我正在制作一个作品集，当我点击细节按钮时，我显示了关于该特定工作的细节，我接下来要做的是在我不想再看到它们时隐藏细节，因此我认为我需要让我的按钮成为一个切换按钮来隐藏和显示细节。

我是React和Redux的新手，我正在学习。

这是我的GitHub仓库

https://github.com/hseleiro/PortBeta

你可以通过npm start来启动服务器。

再一次，目标是做一个切换按钮来隐藏和显示细节，我卡住了它，我不能再走了。

有人能帮我吗?

这是我的miristica.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { selectTrabalho } from '../../actions/index';
import TrabalhoMiristica from './detalhe_miristica';

class Miristica extends Component {
renderList(){
    return this.props.trabalho_m.map((trabalho) => {
        return (
            <li>
                <div className="row list-group">
                    <div className="col-md-4">
                        <img src={trabalho.img} />
                    </div>
                    <div className="col-md-8">
                        <h3>{trabalho.title}</h3>
                        <p>{trabalho.descricao}</p>
                        <button key={trabalho.id} onClick={() => this.props.selectTrabalho(trabalho)} type="button" className="btn btn-info">Detalhes</button>
                        <br/>
                        <br/>
                        <TrabalhoMiristica/>
                    </div>
                </div>
            </li>
        );
    })
}
render() {
return (
    <ul className="list-group col-ms-4"> 
        {this.renderList()}
    </ul>
   );
  }
}

function mapStateToProps(state) {
return {
    trabalho_m: state.trabalho_m
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({ selectTrabalho: selectTrabalho }, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(Miristica);

这是我的detail .js，我想隐藏和显示的那个

import React, { Component } from 'react';
import { connect } from 'react-redux';
class TrabalhoMiristica extends Component {
render() {
    if (!this.props.trabalho) {
        return <div></div>;
    }
    return (
        <div>
            <div>{this.props.trabalho.tec}</div>
        </div>
    );
    }
 }
function mapStateToProps(state){
return {
    trabalho: state.activeMiristica
};
}

export default connect(mapStateToProps)(TrabalhoMiristica);

如果你们需要更多的信息请告诉我。

Thanks in advance

Answer 1

所以，你有Redux存储与应用程序状态，和组件的本地状态。一种选择——你可以将本地状态存储在React组件中，然后像往常一样使用setState。如果你的应用很简单，你不需要从其他地方访问组件的本地状态，这是一个很好的选择。

但是，如果你有一个大的应用程序，并使用Redux，另一个选择-有组件状态存储，并使用Redux操作来处理它。这样你就可以拥有全局状态，可以从其他组件访问。

看看Redux- ui或Redux Fractal，它们可以帮助你做到这一点。这个库负责将本地组件状态存储在存储中，并为您提供在组件级别使用该状态的帮助。

你可以这样写:

ui({state: {showDescription: false}})(connect(mapStateToProps)(TrabalhoMiristica))

在组件的某处使用函数updateUI('showDescription', true)。组件状态将在this.props.ui.showDescription中可用。

对于更复杂的情况，您可以像always一样调度操作，并在Redux UI中捕获它们，从而从那里修改状态。

Redux UI没有最好的文档，但是查看测试文件夹可以有所帮助。

在最简单的情况下，你可以用你的，em，卡片来存储，例如:

const cards = {
    cardID1: {
        title: 'some title',
        description: 'some description',
        expanded: false
    }
    ...
}

有这样的动作:

const toggleDescription = (id) => {type: 'TOGGLE_DESCRIPTION', id};

在reducer中检查这个，通过卡id切换expand属性:

const reducer = (state, action) => {
     if (action.type === 'TOGGLE_DESCRIPTION') {
          // you have action.id here from action creator,
          // and state, where you can get card you need by that id,
          // change expanded property and return new state
     }
}