Reactjs 在声明对象时向组件发送本机道具

我试图在FooScreen中将任何道具发送到我的ComponentObject中，并在组件中使用它，但它不允许我使用它

   const FooScreen = ({props}) => <Center><Text>{props}</Text></Center>;
const BarScreen = () => <Center><Text>Bar</Text></Center>;

const components = {
  Foo: FooScreen({name:'test1'}),
  Bar: BarScreen({name:'test2'}),
};

const Center = ({ children }) => (
  <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>{children}</View>
);


const pages = [
    { screenName: 'Foo', componentName: 'Foo' },
    { screenName: 'Bar', componentName: 'Bar' },
  ];

constfooscreen=（{props}）=>{props}；
常数条屏幕=（）=>条；
常数分量={
Foo:FooScreen（{name:'test1'}），
Bar:BarScreen（{name:'test2'}），
};
常量中心=（{children}）=>(
{儿童}
);
常量页=[
{屏幕名称：'Foo'，组件名称：'Foo'}，
{屏幕名称：'Bar'，组件名称：'Bar'}，
];

我在屏幕上把它当作道具发送，在另一个屏幕上我试着把它当作道具使用

class TabBarView extends Component {
constructor(props){
    super(props);
    this.state = {
        tabs: ''
    }
}
componentDidMount(){
    console.log(this.props)
}
componentWillMount(){
    console.log(this.props)
    const {pages,components} = this.props
    setTimeout(() => {
        const screens = {};
        pages.forEach(page => {
          screens[page.screenName] = { screen: components[page.componentName] };
        });
        this.setState({ tabs: TabNavigator(screens) });
      }, 2000);
    }

    render() {
      if (this.state.tabs) {
        return <this.state.tabs />;
      }
      return <View><Text>Loading...</Text></View>;
    }
}

类TabBarView扩展组件{
建造师（道具）{
超级（道具）；
此.state={
选项卡：“”
}
}
componentDidMount（）{
console.log（this.props）
}
组件willmount（）{
console.log（this.props）
const{pages，components}=this.props
设置超时（（）=>{
常量屏幕={}；
pages.forEach（第=>{
screens[page.screenName]={screen:components[page.componentName]}；
});
this.setState（{tabs:TabNavigator（screens）}）；
}, 2000);
}
render（）{
if（this.state.tabs）{
返回；
}
返回装载。。。；
}
}

它失败了，不让我这样做。 稍后，我想在FooScreen中使用react中的真实屏幕，并将其设置为stackNavigator

我得到了错误

路由“Foo”的组件必须是react组件

---

我建议组件返回函数而不是React元素。为每个元素分配一个键很容易。

setState

不应在componentWillMount中使用，尤其是当有计时器导致副作用时。
为了提高效率，我在web上测试了下面的代码。如果将

div

替换为

View

，将

p

替换为

Text

，则应在React Native中使用。不要忘记从“react native”导入{Text，View}

import React, { Component } from 'react';

const FooScreen = props => (
  <Center>
    <Text>{`[Foo] ${props.name}`}</Text>
  </Center>
);
const BarScreen = props => (
  <Center>
    <Text>{`[Bar] ${props.name}`}</Text>
  </Center>
);

const components = {
  Foo: (key) => <FooScreen name="test1" key={key} />,
  Bar: (key) => <BarScreen name="test2" key={key} />,
};

const Center = props => (
  <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
    {props.children}
  </View>
);

const pages = [ 'Foo', 'Bar' ];

export default class TabBardiv extends Component {
  state = {
    tabs: null,
  };

  componentDidMount() {
    console.log(pages);

    setTimeout(() => {
      this.setState({ tabs: pages });
    }, 2000);
  }

  render() {
    if (!this.state.tabs) {
      return (
        <View>
          <Text>Loading...</Text>
        </View>
      );
    }

    const screens = pages.map((page, index) => {
      const element = components[page];
      console.log(element);
      return element(index);
    });
    return screens;
  }
}

import React，{Component}来自'React'；
const FooScreen=props=>(
{`[Foo]${props.name}`}
);
const BarScreen=props=>(
{`[Bar]${props.name}`}
);
常数分量={
Foo：（键）=>，
条：（键）=>，
};
常数中心=道具=>(
{props.children}
);
常量页面=['Foo'，'Bar']；
导出默认类TabBardiv扩展组件{
状态={
制表符：空，
};
componentDidMount（）{
控制台日志（页）；
设置超时（（）=>{
this.setState（{tabs:pages}）；
}, 2000);
}
render（）{
如果（！this.state.tabs）{
返回(
加载。。。
);
}
const screens=pages.map（（页面，索引）=>{
常量元素=组件[第页]；
控制台日志（元素）；
返回元素（索引）；
});
返回屏幕；
}
}

你缺少一个逗号

，

在

Foo:FooScreen（{name:'test1'}）

之后发布你的错误消息会非常有用，正如@BrunoEly提到的，你缺少一个逗号。我编辑了我的帖子，你可以看到完整的示例和我得到的错误在哪里使用const屏幕？您只需编写它而不使用或调用它们。所有的

const

屏幕都是无状态组件。请参考此示例将其导出。我这样评估它，因此components对象接受键值并返回React元素。请在React native中将

阶段替换为

，将“”替换为“”。我在网页上进行了测试，因为想法是一样的，测试它是否有效更快。