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返回的值，然后将此状态传递给第二个子类型

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的render方法

只有在取消注释此行时才会出现这种情况：

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

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

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

Answer 1

编辑：
在Genre组件的render方法中，您使用属性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值应该得到正确的结果

React Native在组件

1 个答案: