Reactjs 反应：如何在应用程序结构的两个布局中使用{props.children}

我在React中创建了一个系统，其中每个页面都检查用户是否经过身份验证，这意味着他已登录

但是我的页面有两种不同的布局，它们都使用

{props.children}

，当两种布局中的任何一种被加载时，结果都是一个空页面，并显示错误消息：

TypeError: Cannot read property 'children' of undefined
CustomLayout
.../src/containers/Layout.js:129
  126 |     </div>
  127 |   </div>
  128 | </div>
> 129 | <div
      | ^  130 |   className={
  131 |     active ? 'main-content-wrapper' : 'main-content-wrapper-collapsed'
  132 |   }

TypeError:无法读取未定义的属性“children”
自定义布局
…/src/containers/Layout.js:129
126 |     
127 |   
128 | 
> 129 |  (
);

只包含useffect函数，该函数检查用户是否经过身份验证，并且不为子用户提供JSX布局：

const CheckAuthenticated = (props) => {
    useEffect(() => {
        const fetchData = async () => {
            try {
                await props.checkAuthenticated();
                await props.load_user();
            } catch (err) {

            }
        }

        fetchData();
    }, []);

    return (
        <div>
            {props.children}
        </div>
    );
};

export default connect(null, { checkAuthenticated, load_user })(CheckAuthenticated);

const CheckAuthenticated=（道具）=>{
useffect（（）=>{
const fetchData=async（）=>{
试一试{
等待道具。checkAuthenticated（）；
等待道具。加载用户（）；
}捕捉（错误）{
}
}
fetchData（）；
}, []);
返回(
{props.children}
);
};
导出默认连接（null，{checkAuthenticated，load_user}）（checkAuthenticated）；

还包含useffect函数，该函数检查用户是否经过身份验证，但还包含JSX，它是应用程序仪表板的布局，并且还有一个{props.children}部分：
（这是带有{props.children}的小部分）

{props.children}

是否不能在应用程序结构中使用{props.children}两次？是否有一种解决方案，使每个页面仍然检查身份验证，但应用程序仍然有两种不同的布局？

您是否传递了“props”？ 看起来你的组件没有收到道具

const CustomLayout = () => (...)
to
const CustomLayout = (props) => (...)

---

您可以在所有React应用程序中使用

{props.children}

，没有任何限制。

您说得对，我的组件是

const CustomLayout=（{props，isAuthenticated}）=>

，但我现在修复了它，感谢您的帮助。

      <div className={ active ? 'main-content-wrapper' : 'main-content-wrapper-collapsed' }>
        {props.children}
      </div>

const CustomLayout = () => (...)
to
const CustomLayout = (props) => (...)