React Native 在组件之间传递数组

Question

我正在尝试将一组数字从一个子组件传递到另一个子组件。我相信这样做的方法是通过他们的父文件。

第一个 child-generateButton 仅在 onPress 上生成一个由 3 个随机数组成的数组

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  TouchableHighlight,
  Text,
  View
 } from 'react-native';
import styles from '../styles/styles';


var GenerateButton = React.createClass({

  generateRandoms: function() {
    let randomNumbers = [Math.random(), Math.random(), Math.random()];
    this.props.onPress(randomNumbers);
  },

  render: function (){
    return (
        <TouchableHighlight 
        onPress={this.generateRandoms} 
        style={styles.generateButton}>
            <Text style={styles.generateButton}>Generate!</Text>
        </TouchableHighlight>
    );
  }
});

module.exports = GenerateButton; 

Parent-main 使用这个将状态 randomGenres 的值更改为 generateButton 返回的值，然后将此状态传递给第二个子 Genre

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import {
Genre
} from './genreSelector';
import GenerateButton from './generateButton';
import styles from '../styles/styles';

var Main = React.createClass ({

  propTypes: {
    randomGenres: React.PropTypes.array, 
    newRandoms: React.PropTypes.array
  },

  getInitialState: function () {
    return { randomGenres: [4,7,19]};
  },

  changeRandoms: function (newRandoms) {
    this.setState({
        randomGenres: newRandoms
    });
  },

  render (){
    return (
   <View style={styles.container}>
    <Text style= {styles.title}>Genre Generator</Text>
    <Text style={styles.h2}>I am listening to</Text>
    <View style={styles.genreContainer}>
        <Genre randomGenres={this.state.randomGenres}/> 
    </View>
    <Text style={styles.h2}>You filthy casual</Text>
    <GenerateButton onPress={this.changeRandoms}/>

   </View>
    );
}
});

module.exports = Main;

第二个孩子-流派，此时我想要它做的就是接收 randomGenres 作为道具并渲染三个值

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import{
    genre1,
    genre2,
    genre3
} from './genres.js';
import styles from '../styles/styles';

var Genre = React.createClass({

   render: function (){
    var randomGenres = this.props.randomGenres;

    return (
        <View styles={styles.genreContainer}>
            <Text >{randomGenres[0]}</Text>
            <Text >{randomGenres[1]}</Text>
            <Text >{randomGenres[2]}</Text>
        </View>
        );
    }
});

module.exports = Genre;

最终，它会通过查找类型数组的随机元素并显示它们而不仅仅是数字，将随机数转换为随机类型。但是我似乎无法在组件之间传递数组

我的错误：元素类型无效：应为字符串或类/函数，请检查 main 的渲染方法

只有在取消注释该行时才会发生这种情况：

<Genre randomGenres={this.state.randomGenres}/>

我认为我的错误在于 Genre 如何接收存储在 randomGenres 中的数组

我尝试使用 propTypes 设置道具的数据类型，但没有运气，任何帮助将不胜感激！

Answer 1

编辑：
在 Genre 组件的渲染方法中，您使用属性 styles 而不是 style
删除它应该可以修复 你的错误：

import React, { Component } from 'react';
...
var Genre = React.createClass({

   render: function (){
    var randomGenres = this.props.randomGenres;

    return (
        <View style={styles.genreContainer}>
...
        </View>
        );
    }
});

module.exports = Genre;

正如 NiFi 在下面的评论详细信息：setState 方法接受一个回调作为可选的第二个参数，一旦 setState 完成就会触发该回调。在这里抓取 randomNumbers 值应该会产生正确的结果