taro组件传参

如何在Taro中编写一个子组件，并通过父组件进行传值。

编写子组件

打开/myDemo1/src/pages/index文件夹，在文件下面建立一个child.jsx文件，然后打开文件，编写组件代码：

import { View, Text } from '@tarojs/components'
function Child(){
  return ( 
    <View><Text>我是子组件</Text></View>
  )
}
export default Child

编写完成后这就是一个组件，使用也是非常简单的，直接到index.jsx页面中，用import进入这个组件。

import Child from './child.jsx'

需要注意的是这个Child要跟child.jsx中的fucntion的名称一样，否则在小程序中会有问题。引入后就可以直接用标签的形式进行使用了,这里为了方便学习，给出全部代码。

import Taro, {  useState } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import Child from './child.jsx'
import './index.less'
function Index(){
  const [userName ,setUserName] = useState('Hello World!!!!')
  return ( 
    <View>
        <Text>{userName}</Text>
        <Child></Child>
    </View>
  )
}
export default Index

这只是最简单的子组件，现在升级一下难度，我们要给子组件进行传值，看看如何进行操作。

父组件向子组件传值

学过React都知道，父组件向子组件传值是通过props进行，在Taro中也是可以这样传值的，现在修改index.jsx代码，把userName传递给子组件。

import Taro, {  useState } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import Child from './child.jsx'
import './index.less'
function Index(){
  const [userName ,setUserName] = useState('Hello World!!!!')
  return ( 
    <View>
        <Text>{userName}</Text>
        <Child userName={userName}></Child>
    </View>
  )
}
export default Index

这篇传递后，子组件要增加props参数，然后才能用props进行接收。

import { View, Text } from '@tarojs/components'
function Child(props){
  return ( 
  <View><Text>我是子组件，父组件向我传值为:{props.userName}</Text></View>
  )
}
export default Child

这就完成了父组件向子组件的传值，是不是非常的简单。当我们会用组件的形式编写页面和组件时，你就可以作一些小东西了。但现在你可以看到，我们把页面和组件放到了一个文件夹下，并且都使用了jsx扩展名。那Taro时如何区分那些是组件，那些是页面的？其实它是通过自身的路由来区分的，只要配置路由的，就是页面，没配置的就默认是组件。