Question

我有一个名为'RegistrationForm'的组件。

所以，现在有一个场景，桌面布局和移动布局不同。

示例：

移动电话：

<div className="registration mobile">
    <RegistrationForm/>
</div>

桌面版：

 <div className="registration desktop">
     <RegistrationForm/>
 </div>

此处的问题是，由于提供的设计，移动设备和桌面设置在不同的文件中。所以我在想，有没有办法同步所有RegistrationForm中的状态？从技术上讲，如果我真的必须放两个组件，它将被视为独立组件，而实际上这两个组件就像一个开关。任何时候都只会出现一个版本。

Answer 1

您可以执行以下操作来更改css但具有相同的组件

   <div className={`registration ${conditionForMobile?'mobile':'desktop'}`}>
<RegistrationForm/>
</div>

Answer 2

有两种方法：

<强>第一。您可以将两种布局连接到redux状态

....
import { connect } from 'react-redux';

const mapStateToProps = (yourGlobalState) => {
    return ({ data: yourGlobalState.stateOfForm });
};

export const Mobile = connect(mapStateToProps)(MobileLayout);
export const Desctop = connect(mapStateToProps)(DesctopLayout);

您也可以使用装饰器

@connect(mapStateToProps)
export class MobileLayout extends React.Component {
    ....
}

<强>第二。您可以创建更高层以保持两种布局的状态。该层将通过connect（如第一种方式）或其他组件获得状态。

....
export class HigherLayer extends React.Component {
    render() {
        const { data, isMobile } = this.props;
        const Widget = isMobile ? Mobile : Desctop;

        return <Widget data={data}/>;
    }
}
....

有关于此方法的文档https://reactjs.org/docs/lifting-state-up.html

您也可以尝试使用高阶组件（HOC）或此https://www.youtube.com/watch?v=BcVAq3YFiuc

与Redux反应：有没有办法同步“相同”的组件？

2 个答案: