Taro3.0.2 A页面 提供methodA函数组件 给 B组件使用 B组件无法控制 methodA组件 flex水平方向排列

[aidisheng]

相关平台

百度小程序

小程序基础库: 3.190.255
使用框架: React

复现步骤

1、ComponentB
import React from 'react'
import { View } from '@tarojs/components'

import './ComponentB.scss'

export function ComponentB({tabView}) {

return (

from page A

{tabView()}

-----------self

self4
self5
self6


)
}

2、ComponentB.scss
.flex-view {
display: flex;
flex-direction: row;
justify-content: space-between;
}

3、PageA
import React from 'react'
import { View, Block } from '@tarojs/components'
import {ComponentB} from './ComponentB'

const PageA = () => {
const tabView = () => (
// 解决办法：把flex-view放到这里
//

pagea1
pagea2
pagea3

)

return (



)
}

export default PageA

期望结果

PageA中 tabView函数组件的3个View也能水平排列
微信小程序是正常的。

实际结果

PageA中 tabView函数组件的3个View仍然是垂直排列，控制不了。

环境信息

Taro v3.0.2


  Taro CLI 3.0.2 environment info:
    System:
      OS: Windows 7
    Binaries:
      Node: 12.16.1 - D:\Program Files\nodejs\node.EXE
      Yarn: 1.22.4 - C:\Users\Think\AppData\Roaming\npm\yarn.CMD
      npm: 6.14.5 - D:\Program Files\nodejs\npm.CMD

---

补充信息

自己的临时解决方法：把 从ComponentB中，移到PageA的tabView函数组件中。

[aidisheng]

`
1-ComponentB.tsx
import React from 'react'
import { View } from '@tarojs/components'

import './ComponentB.scss'

export function ComponentB({tabView}) {

return (

from page A

{tabView()}

-----------self

self4
self5
self6


)
}

2-ComponentB.scss
.flex-view, .flex-view2 {
display: flex;
flex-direction: row;
justify-content: space-between;
}

3-PageA.tsx
import React from 'react'
import { View, Block } from '@tarojs/components'
import {ComponentB} from './ComponentB'

const PageA = () => {
const tabView = () => (
// 解决办法：把flex-view放到这里
//

pagea1
pagea2
pagea3

)

return (



)
}

export default PageA

`

[Chen-jj]

@aidisheng 请提供可运行可复现的代码，并整理好你的代码格式

[Chen-jj]

没有清晰能运行的代码，无法定位