Question

即时制作投资组合，当我点击详细信息按钮时，我会显示有关该特定工作的详细信息，接下来我想要做的是隐藏de详细信息，当我不想再看到它们时，因为我觉得我需要使我的按钮成为切换按钮以隐藏和显示细节。

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

这是我的gitHub存储库

您只需启动npm即可启动服务器。

目标是再次制作一个切换按钮来隐藏和显示细节，我坚持下去，我不能再继续了。

有人可以帮助我吗？

这是我的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);

这是我的详细信息.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);

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

提前致谢

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中提供。

对于更复杂的情况，您可以像往常一样调度操作，并在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
     }
}

React-Redux - Toogle按钮，用于显示和隐藏详细信息

1 个答案: