NativeBase Drawer自定义SideBar组件能否传递Props？示例中test属性未生效

当然可以给NativeBase Drawer的自定义SideBar传递Props啦！你遇到的这个问题很常见，我来帮你一步步排查解决：

第一步：确认SideBar组件正确接收Props #

首先要确保你的SideBar组件确实在接收并使用你传递的test和onRest属性。比如如果是函数组件，应该这样定义：

// 函数组件示例
const SideBar = ({ onRest, test }) => {
  // 可以先打印看看Props是否接收到
  console.log('SideBar props:', { onRest, test });
  return (
    <div>
      <p>Test属性值：{test}</p>
      <button onClick={onRest}>切换到Rest状态</button>
    </div>
  );
};

如果是类组件，就要通过this.props来访问：

// 类组件示例
class SideBar extends React.Component {
  render() {
    console.log('SideBar props:', this.props);
    return (
      <div>
        <p>Test属性值：{this.props.test}</p>
        <button onClick={this.props.onRest}>切换到Rest状态</button>
      </div>
    );
  }
}

很多时候Props不生效，只是因为子组件没正确接收而已。

第二步：用函数形式传递content属性 #

如果确认SideBar已经正确接收Props，但还是没效果，那试试把content的值改成一个返回SideBar组件的函数。有些UI库的抽屉组件在处理content时，会对传入的组件做一层包装，用函数传递能避免这个问题：

render () { 
  return ( 
    <Drawer 
      ref={ref => (this.drawer = ref)} 
      content={() => <SideBar onRest={this.changeToRest} test="12" />}
    >
      {/* 这里放你的主页面内容 */}
    </Drawer>
  );
}

这种方式能确保Drawer在渲染侧边栏时，直接调用函数生成你配置好Props的SideBar组件，不会丢失属性。

排查小技巧 #

你可以在SideBar组件里加个console.log打印Props，看看test和onRest有没有出现在输出里：

• 如果打印出来有这些属性，那就是你在SideBar里没正确使用它们；
• 如果没有，就用上面的函数传递content的方法试试，基本就能解决问题啦！

内容的提问来源于stack exchange，提问作者Stepan Vanzuriak