Question

我想在按下按钮时更改整个应用的样式。我以为我可以用reducer做到这一点。所以我创建了：

ReducerStyles：

const initialState = 
        {
            name: styleNormal,
            path: './styles/styleNormal'
        }


export default function reducer01 (state = initialState, action) {
      switch (action.type) {
        case "changeStyleNormal":
             return [
                ...state,
                {
                name: name: action.payload,
                path: './styles/styleNormal'
                }
             ];

        case "changeStyleNew":
             return [
                ...state,
                {
                name: name: action.payload,
                path: './styles/styleNew'
                }
             ];

        default:
          return state
      }
    }

和行动：

const CHANGE_STYLE_NORMAL = 'changeStyleNormal';
const CHANGE_STYLE_NEW = 'changeStyleNew';

export function changeStyleNormal(style){
    return {
        type: CHANGE_STYLE_NORMAL,
        payload: style
    }
}

export function changeStyleNew(style){
    return {
        type: CHANGE_STYLE_NEW,
        payload: style
    }
}

我在styles文件夹中创建了2个样式，因此根据从reducer中选择/返回的样式，只能应用1个样式。默认情况下，我在Reducer styleNormal中有initialState。导入了Actions，Reducer与mapStateToProps：

组合在一起

function mapStateToProps(state) {
  return {
      style: state.style
  }
}


function mapDispatchToProps(dispatch) {
  return {
    changeStyleNormal: (style) => {
      dispatch(changeStyleNormal(style));
    },
    changeStyleNew: (style) => {
      dispatch(changeStyleNew(style));
    }
  }
}

添加了2个按钮：

    <TouchableOpacity 
      style={styles.clickMe}
      onPress={()=>this.props.changeStyleNew('styleNew')}>
      <Text style={styles.black18}>New Style</Text>
    </TouchableOpacity>


    <TouchableOpacity 
      style={styles.clickMe}
      onPress={()=>this.props.changeStyleNormal('styleNormal')}>
      <Text style={styles.black18}>Normal Style</Text>
    </TouchableOpacity>

现在调用组件时，

render() {
 console.log("style: ",this.props.style);

这样的风格为：

我无法从this.props.style中访问render()所以我在哪里设置var style = this.props.style.path？

此外，当我单击任何按钮时，操作很好，但样式会附加到reducer：

我只希望传递给减速器的那个。所以我可以用它来设置风格。

这是正确的方法吗？请帮忙。

非常感谢。

更新1：

class Ext2 extends Component {

//console.log('Style:', this.props.people);  // <= This throws an internal server error 500
// const styles = this.props.style.path;  // same error as above

    render() {
     console.log("style: ",this.props.style);   //<= Works
     console.log("stylePath: ",this.props.style.path)  //<= Works

Answer 1

我无法从render（）
中访问this.props.style

是什么让你认为你无法访问它？您可以在this.props。

的任何位置访问class

此外，当我单击任何按钮时，操作很好，但样式被附加到reducer

您的初始状态是一个对象，但您正在从reducers返回一个数组：

case "changeStyleNew":
             return [
                ...state,
                {
                name: name: action.payload,
                path: './styles/styleNew'
                }
             ];

而是尝试返回这样的对象：

case "changeStyleNew":
             return{
                ...state,
                name: name: action.payload,
                path: './styles/styleNew'
              }

修改
作为评论的后续内容，以下是您在this.props方法之外访问render的方式和位置的简单示例：

＆＃13;
＆＃13;
class Counter extends React.Component { constructor(props) { super(props); this.state = { count: this.props.count // acess props }; this.add = this.add.bind(this); this.sub = this.sub.bind(this); } componentWillReceiveProps(nextProps) { this.setState({ count: nextProps.count }); } add() { this.props.addClick(); // acess props } sub() { this.props.subClick(); // acess props } render() { const { count } = this.state; return ( <div> <div>Count:{count} </div> <button onClick={this.add}>+</button> <button onClick={this.sub}>-</button> </div> ); } } class App extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; this.addClick = this.addClick.bind(this); this.subClick = this.subClick.bind(this); } addClick() { const nextstate = this.state.count + 1; this.setState({ count: nextstate }); } subClick() { const nextstate = this.state.count - 1; this.setState({ count: nextstate }); } render() { return ( <div> <h2>Wellcome to my Counter!</h2> <Counter count={this.state.count} addClick={this.addClick} subClick={this.subClick} /> </div> ); } } ReactDOM.render(<App />, document.getElementById("root"));
＆＃13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>
＆＃13;
＆＃13;
＆＃13;

更改样式onPress + Redux

1 个答案: