小编Ita*_*lik的帖子

在我的项目中，我有带有全局样式的主文件，但在单个组件中也使用了样式。但是，我使用相同的变量将字体大小，颜色传递给元素。

我不是React方面的专家，但我认为将变量移至单独的文件而不重复代码会很好。我如何以适当的方式做到这一点？

整体风格：

'use strict';

  let React = require('react-native');

  let {
    StyleSheet,
  } = React;

  let INIT_COLOR = "#fff";
  let INIT_FONT_SIZE = 16; 


  module.exports = StyleSheet.create({
    container: {
        backgroundColor: INIT_COLOR,
        fontSize: INIT_FONT_SIZE
    },
});  

组件样式：

import React from 'react';
import { View, StyleSheet, Button} from 'react-native';

class ActionButton extends React.Component {

 render() {
   let INIT_COLOR = "#fff";
   let INIT_FONT_SIZE = 16;

  return (
    <View style={styles.buttonContainer}>
        <Button
          onPress={this.props.onPress}
        />
    </View>
   );
 }
}

const styles = StyleSheet.create({
    buttonContainer: {
      backgroundColor: INIT_COLOR, …

我一整天都在为一个问题苦苦挣扎......我有书籍列表，点击后用户可以看到每本书的详细信息。我想在单击background-color元素时添加li（类似于类active）。我使用 Redux 和 React，但不知道创建此功能的最佳方法是什么。请给我一些提示，因为我对 React 环境感到灰心......

图书列表.js

class BookList extends Component {
    renderList(){
        return this.props.books.map((book) => {
            return (
                <li key={book.title} 
                    className="list-group-item" 
                    onClick={() => this.props.selectBook(book)}>
                    {book.title}
                </li>
            )
        })
    }

render () {
    return (
        <div>
            <h3 className="m-t-2 m-b-1">Books to read:</h3>
            <ul className="list-group col-sm-4">
                {this.renderList()}
            </ul>
        </div>
    );
 } 
}

function mapStateToProps (state) {
    return {
        books: state.books
    };
 }

function mapDispatchToProps(dispatch) {
    return bindActionCreators({ selectBook: selectBook }, dispatch)
}

export default connect (mapStateToProps, …

在我的应用程序（React + Redux + axios + redux-thunk + Typescript）中，当我调用 API、更改数据库中的项目并在表中显示当前更改的状态时，我遇到了一种情况。?所以，它看起来像：

const changeItem = () => changeItemState(item.id).then(getItem(item.id));

这两个操作（changeItemState和getItem）都是从减速器文件中导入的。? 问题是，在后端站点更改项目过程花费的时间太长。因此，我重新加载表（调用 api 以获取项目 - getItem(item.id)）但后端更改过程仍在进行中，因此我收到旧状态。经过100-300毫秒我可以再次查询项目（例如刷新页面），并获得项目的新状态。但我不想手动完成。我想在后端准备好我的项目以显示新状态后重新加载表。

问题是 - 如何延迟获取项目操作？是否有任何前端模式？我想避免使用这样的“setTimeout()”方法（我认为这不是理想的解决方案）：

const changeItem = () => changeItemState(item.id).then(setTimeout(function(){ getItem(item.id); }, 300));,

我有复选框,我想要使用(change)它.默认为"已选中",但点击后我想要清除输入文本"激活密钥".重新检查后,我想生成guid并再次添加到输入.如果选中或不选中复选框怎么办？

<div class="checkbox">
    <label>
       <input type="checkbox" checked (change)="handleChange($event)" > 
           Generate key
    </label>
</div>

TS

handleChange(e) {
    var isChecked = e.isChecked;
    if (isChecked) {
        this.gatewayForm.patchValue({ 'activationKey': this.guid() });
    }
    else {
       this.gatewayForm.controls['activationKey']
           .setValue('', { onlySelf: true });
    }
}

我正在React Native和Redux中创建表单。我添加了TextInput并且想在Reducer中更改该字段的状态。我遇到了麻烦，因为我不知道如何在(change) => this.setState({change})Redux架构中添加功能。我使用组合减速器，却不知道如何绑定该值。简而言之，我需要获得TextInputon change函数的默认行为，但必须使用Redux来实现。

Form.js

const mapDispatchToProps = dispatch => {
  return {
      changeNameInput: () => dispatch({type: 'CHANGE_NAME_INPUT'})
  };
};

const mapStateToProps = state => {
  return {
      change: state.changeNameInput.change
  };
};

class Form extends React.Component {
  render() {
    return (
      <View>
         <FormLabel>Name</FormLabel>
         <TextInput
            onChangeText={this.props.changeNameInput}
            value={this.props.change}
        />
      </View>
    );
  }
}

Reducer.js

const initialState = {
    change: 'Your name'
   };

   const changeinputReducer = (state = initialState, action) => {
     switch (action.type) { 
       case …

我想在点击事件后删除表格行.我已经创建了迭代并显示删除按钮,但不知道如何在我的情况下将onClick事件从父组件传递给子组件.我试图改变const row到component和通过的onClick像通常但这种方法会破坏我的表.

父组件:

class Home extends Component {
 constructor(props) {
 super(props);
 this.state = { data: []};
}

handleDelete{
 alert('here I want to have code to remove row from table')
}

render() {
 return (
  <div>
    <TableTasks data={this.state.data} header={[{ name: "No"}, { name: "Delete" }]} />
  </div>
);
}}

子组件:

const row = (props, i) =>
<TableRow key={`thr-${i}`}>
  <TableRowColumn>
    {props.nameTask}
  </TableRowColumn>
  <TableRowColumn className="DeleteButton">
    <IconButton>
      <DeleteIcon onClick={?????}/>
    </IconButton>
  </TableRowColumn>
</TableRow>;

export const TableTasks = ({ data, header }) …