React Native：发现默认参数children【特殊的prop】

千码君20162025-10-11 19:33

其中添加交互的响应事件部分有一段代码

代码如下：

javascript 复制代码

export default function App() {
  return (
    <Toolbar
      onPlayMovie={() => alert('Playing!')}
      onUploadImage={() => alert('Uploading!')}
    />
  );
}

function Toolbar({ onPlayMovie, onUploadImage }) {
  return (
    <div>
      <Button onClick={onPlayMovie}>
        Play Movie 
      </Button>
      <Button onClick={onUploadImage}>
        Upload Image
      </Button>
    </div>
  );
}

function Button({ onClick, children }) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

呈现出来的效果如下：

这段代码有意思的地方就是，函数组件Button明明需要两个声明的参数，但是ToolBar组件嵌套时只传递了一个第一个参数onClick。而第二个函数children竟然默认是组件中的文本内容也许是我大惊小怪，但在其他的编程语言里面确实没见过，这么灵活的设计，不亲自实践或者有教程可以看到应该不容易理解和发现吧。而且这个参数名称只能是children，不能是其它的命名的，我试过时不好使的。