javascript - 渲染 : div children no styling 中的 React 开关

Question

所以在我的 render() 函数中，我有一个开关可以根据类型有条件地加载不同的组件，问题是对于其中一种情况，我必须渲染 2 个组件，所以我将它们包装在一个 div 中，方法是所以他们失去了分配给他们的类 inputField，代码是这样的:

{(() => {
                switch (values.type) {
                  case "sole":
                    return (
                      <div>
                        <InputMask
                          className={classNames(
                            styles.inputField,
                            styles.override
                          )}
                        >
                          {() => (
                            <LNTextField
                              type="text"
                            />
                          )}
                        </InputMask>
                        <InputMask
                          className={classNames(
                            styles.inputField,
                            styles.override
                          )}
                        >
                          {() => (
                            <LNTextField
                              name="dob"
                              type="text"
                            />
                          )}
                        </InputMask>
                      </div>
                    );
                  default:
                    return null;
                }
              })()}

我删除了代码的很多功能位，因为这是一个样式问题，为什么 InputMasks 没有应用 inputField 类，现在它们在 div 中，我该如何修复这个？

这是样式的外观，我正在使用覆盖来提高优先级；

.inputField.override {
  margin-top: 2.5%;
  margin-bottom: 2.5%;
}

Answer 1

您制定的样式规则可能非常具体，如果随机 div 则它们将不起作用。在路上。这通常是由于使用了子选择器或兄弟选择器。

作为解决方案，您可以使用 <React.Fragment>包装器而不是 <div>包装您的元素。简写为 <> .

<>
  <MyFirstComponent />
  <MySecondComponent />
</>