什么是ReactJ组件重复使用的更好方法

Question

在我的ReactJ组件中，我有很多重复。我希望能够删除该重复。

这是组件的修剪版本：

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);
    }
}

我认为是一个好主意，是串联结果layout，但这似乎不起作用：

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)，它返回 object 。

相反，分配可以更改为变量的零件并将其包含在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>
    );
}