Question

在我的ReactJS组件的渲染中，我有很多重复。我希望能够删除这种重复。

这是组件的精简版本：

export default class PageBody extends React.Component {

    constructor(props) {
        super(props);  

        this.state = {
            displayState: 0         
        };      
    }

    render() {

        const whichLayout = this.state.displayState;
        let resultLayout = null;
        switch(whichLayout) {
            case 1:
                resultLayout =  <div><Toolbar /><br /><PortfolioBody /></div>
                break;
            default:
                resultLayout =  <div><Toolbar /><br /><DefaultBody /></div>
                break;
        }

        return (resultLayout);
    }
}

我认为这是一个好主意是连接resultLayout，但这似乎不起作用：

let resultLayout = <div><Toolbar /><br />;
        switch(whichLayout) {
            case 1:
                resultLayout =  resultLayout + <PortfolioBody />
                break;
            default:
                resultLayout =  resultLayout + <DefaultBody />
                break;
        }
 resultLayout = </div>;

思想？

谢谢马特

Answer 1

<PortfolioBody />不是字符串，你不能连接它。它等同于React.createElement(PortfoliaBody)，它返回对象。

相反，将可以更改的部分分配给变量并将其包含在JSX中：

export default class PageBody extends React.Component {

    constructor(props) {
        super(props);  

        this.state = {
            displayState: 0         
        };      
    }

    render() {

        const whichLayout = this.state.displayState;
        let resultLayout = null;
        switch(whichLayout) {
            case 1:
                resultLayout =  <PortfolioBody />;
                break;
            default:
                resultLayout =  <DefaultBody />;
                break;
        }

        return (
          <div>
            <Toolbar />
            <br />
            {resultLayout}
          </div>
        );
    }
}

或更精简：

const layouts = {
  1: PortfolioBody,
};

export default class PageBody extends React.Component {

    constructor(props) {
        super(props);  

        this.state = {
            displayState: 0         
        };      
    }

    render() {
        return (
          <div>
            <Toolbar />
            <br />
            {React.createElement(layouts[this.state.displayState] || DefaultBody)}
          </div>
        );
    }
}

Answer 2

它是jsx而非string，因为工具栏很常见，因此您可以直接render并将逻辑用于其他组件。

像这样写：

render() {

    const whichLayout = this.state.displayState;
    let resultLayout = null;
    switch(whichLayout) {
        case 1:
            resultLayout =  <PortfolioBody />
            break;
        default:
            resultLayout =  <DefaultBody />
            break;
    }

    return (
        <div>
            <Toolbar />
            <br />
            {resultLayout}
        </div>
    );
}

或者您可以将switch部分放在另一个方法中并从render调用该方法，从而将其提高一级。

像这样：

renderComponent(){
    switch(this.state.displayState) {
        case 1: return <PortfolioBody />;
        default: return <DefaultBody />
    }
}

render() {
    return (
        <div>
            <Toolbar />
            <br />
            {this.renderComponent()}
        </div>
    );
}

ReactJS组件重用的更好方法是什么？

2 个答案: