react基础：父子组件通信两个父子组件中可传递参数声明一个父组件App，子组件Welcome。在两个组件中传递参数的

两个父子组件中可传递参数

声明一个父组件App，子组件Welcome。在两个组件中传递参数的方法：

1. 传递数字，字符串，数组等基本类型

用props挂载父组件传过来的参数，通过点语法在组件中渲染出来

function Welcome(props) {
  return (
    <div>
      Welcome
      {props.count}
    </div>
  )
}
function App() {
  const cut = 'ddd'
  return (
    <div>
      hello App
      <Welcome count={cut} />
    </div>
  )
}
export default App

直接通过对props对象解构的方式，接收父组件传递过来的参数

function Welcome({ count }) {
  return (
    <div>
      Welcome
      {count}
    </div>
  )
}
function App() {
  const cut = 'ddd'
  return (
    <div>
      hello App
      <Welcome count={cut} />
    </div>
  )
}
export default App

注意：当某个属性在传递中没有指定值时，会变为布尔值，例如isshow属性，用 {isshow + ''}语法在页面上显现出来，（当然也可以在逻辑中显示）

function Welcome({isshow }) {
  return (
    <div>
      Welcome
      {isshow + ''}
    </div>
  )
}
function App() {
  const cut = 'ddd'
  return (
    <div>
      hello App
      <Welcome isshow />
    </div>
  )
}
export default App

2. 传递函数

function Welcome({ onClick }) {
  onClick('我是子组件的数据')
  return <div>Welcome</div>
}
function App() {
  const handelClick = (data) => {
    console.log({ data })
  }
  return (
    <div>
      hello App
      <Welcome onClick={handelClick} />
    </div>
  )
}
export default App

3. 传递对象

但是一般从后端传过来的数据是对象形式，这里模拟一下

此时需要用{...info}扩展语法的形式，并在子组件中用对象结构语法一一结构出来。

 function Welcome({ name, add, number, age }) {
   return (
     <div>
       hello Welcome
       {name},{age},{add},{number}
     </div>
   )
 }
 function App() {
   const info = {
     name: 'xx',
     age: 33,
     number: 1998838,
     add: 998,
   }
   return (
     <div>
       hello App
       <Welcome {...info}  />
     </div>
   )
 }
 export default App

三个父子组件通信

在父组件App和子组件Welcom的基础上添加Build子组件（孙组件）。实现App中嵌套Welcom中嵌套Build的关系。

法一:在welcome中用`{children}`对象结构形式接受Build子组件。

function Build() {
  return <div>Build</div>
}
function Welcome({ children }) {
  return (
    <div>
      Welcome
      {children}
    </div>
  )
}
function App() {
  return (
    <div>
      hello App
      <Welcome>
        <Build />
      </Welcome>
    </div>
  )
}
export default App

法二：将Buid组件写在Welcom组件内部

function Build() {
  return <div>Build</div>
}
function Welcome() {
  return (
    <div>
      Welcome
      <Build />
    </div>
  )
}
function App() {
  return (
    <div>
      hello App
      <Welcome></Welcome>
    </div>
  )
}
export default App

传参时会传直接套用的父组件中的变量。即使App组件中也有变量，Build也会直接使用Welcom中的count，如果Welcom中没有，App中有，也不会才用App组件的，而是报错.

function Build({ count }) {
  return (
    <div>
      Build
      {count}
    </div>
  )
}
function Welcome() {
  const count = 456
  return (
    <div>
      Welcome
      <Build count={count} />
    </div>
  )
}

若采用法一的{children}的形式可以直接在App组件中传递

function Build({ count }) {
  return (
    <div>
      hello build
      {count}
    </div>
  )
}
function Welcom({ children}) {
  return (
    <div>
      hello Welcome
      {children}
    </div>
  )
}
function App() {
  const count = 'hhhh'
  return (
    <div>
      hello App
      <Welcom>
        <Build count={count} />
      </Welcom>
    </div>
  )
}
export default App

控制子组件的渲染方式假如想要分别渲染aaaa，bbbbb两行字符串，用以上形式只能合并渲染

function Welcom({ children }) {
  return (
    <div>
      {children}
      hello Welcome
      {children}
    </div>
  )
}
function App() {
  const count = 'hhhh'
  return (
    <div>
      hello App
      <Welcom>
        <div>aaaaa</div>
        <div>bbbbb</div>
      </Welcom>
    </div>
  )
}
export default App

为解决此问题，可以采用直接在welcom组件中传参的方式

function Build() {
  return <div>hello build</div>
}
function Welcom({ children, top, bottom }) {
  return (
    <div>
      {top}
      hello
      {bottom}
    </div>
  )
}
function App() {
  const count = 'hhhh'
  return (
    <div>
      hello App
      <Welcom top="aaaaa" bottom="bbbbb">
        <Build />
      </Welcom>
    </div>
  )
}
export default App

react基础：父子组件通信