Question

我有一种情况，我想根据Redux状态中变量的值来呈现不同的标头。

这是我的MyClass.js

class MyClass extends React.Component {
    constructor(props) {
        this.state = {
            headerState: "home"
        };
        this.GetHeader = this.GetHeader.bind(this);
    }

    GetHeader() {
        const headerType = this.renderHeader;
        if (headerType == "a") {
            return (Some html code);
        } [...] {
            return (Some html code);
        } else {
            return (Some html code);
        }
    }

    render() { <
        GetHeader / > // This is line 79
    }

    function mapStateToProps(state, ownProps) {
        return {
            renderHeader: state.renderHeader
        };
    }
}

export default withRouter(connect(mapStateToProps)(MyClass));

这是我的减速器：

export default function renderHeaderReducer(state = [], action) {
    switch(action.type) {
        case 'RENDER_HEADER':
            return [...state, Object.assign({}, action.headerType)];
        default:
            return state;
    }
}

当我尝试运行代码时，在浏览器上显示：

未捕获的ReferenceError：Header.render（Header.js：79）上未定义GetHeader。

我遵循了这个doc（第一个例子）

对于将方法绑定到this上下文，不确定我做错了什么或必须误解了哪些概念。干杯。

Answer 1

没有GetHeader变量，它是this.GetHeader方法。没有理由将GetHeader用作React元素，这是一种不需要自己的道具的方法。作为方法调用时，不必绑定到this。

没有this.renderHeader，因为renderHeader是道具。

可能应该是：

  state = {
    headerState: "home"
  }

  GetHeader() {
    const headerType = this.props.renderHeader;
    if (headerType == "a") {
       return (Some html code);
    } [...] {
      return (Some html code);
    } else {
      return (Some html code);
    }
 }

 render() {
   return <>
     {this.GetHeader()}
     ...
   </>;
 }

如果render太大或GetHeader未被重用，则可能无需从render中提取其内容。

Answer 2

因为不是。您应该在渲染器中添加一个变量：

case (.none, .some)

您的代码有2个问题： 1.不能在本地访问GetHeader。 2.您没有使用return语句

Answer 3

因为您缺少GetHeader（）{

function GetHeader(){}

有关更多参考信息，请检查：https://reactjs.org/docs/conditional-rendering.html

ReactJS中的条件渲染

3 个答案: