react的嵌套组件

• Z时代
• 2024-01-10
• 分类：综合

　　react没有vue插槽的概念，但是有嵌套组件，可以用嵌套组件实现类似插槽的功能。下例中，color,name,btn相当于具名插槽，children相当于匿名插槽。

import React from 'react';
import { Button } from 'antd';
//props接受参数，props.children代表上级组件所有没有命名的东西
function Dialog(props) {
  return (
    <div style={{ border: `1px solid ${props.color || 'red'}` }}>
      {props.children}
      {props.name}
      {props.btn}
    </div>
  )
}
//WelcomeDialog里嵌套Dialog，并传值name，color,btn
function WelcomeDialog() {
  const btn = <button>按钮</button>
  return (
    <Dialog name="lizhao" color="green" btn={btn}>
      <h1>welcome title</h1>
      <p>welcome content</p>
    </Dialog>
  )
}
class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <WelcomeDialog />
      </div>
    )
  }
}
export default App;

以上是 react的嵌套组件 的全部内容， 来源链接： utcz.com/z/382147.html