Question

我正在使用react-native-accordion进行可折叠列表视图。我的守则如下。它的工作，但它提出了两个警告：

警告：propType失败：提供给Accordion的道具内容无效，需要一个ReactElement。检查StaticRenderer的render方法。

警告：数组或迭代器中的每个子节点都应该有一个唯一的“key”prop。检查Accordion的渲染方法。它是从StaticRenderer传递的一个孩子。

知道怎么解决吗？或者更好的方法为每个标题包含多个内容？（包含孩子的可折叠列表视图）

class Courses extends Component {

  constructor(props) {
        super(props);
        this.state = {
          dataSource: new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
          }),
          loaded: false,
        };
        this.rowPressed = this.rowPressed.bind(this);
    }
  rowPressed(data) {
    console.log('row press');
  }

  fetchData() {
/// fetching data .....
  }

  componentDidMount() {
    this.fetchData();
  }

  render() {
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }

    return (
      <View style={{ flex: 1 }}>
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderRow}
        style={styles.listView}
      />
      </View>
    );
  }

  renderRow(data) {
    var header = (
      <View>
          <View style={styles.rowContainer}>
            <View  style={styles.textContainer}>
              <Text style={styles.title}>{data.nid}</Text>
              <Text style={styles.description} numberOfLines={0}>{data.title}</Text>
            </View>
          </View>
          <View style={styles.separator}/>
        </View>
    );
///////////
    var content = [];
    for(var x=0; x < Object.keys(data.course).length; x++){
      content.push(
        <View style={styles.rowContainer}>
        <TouchableHighlight onPress={() => this.rowPressed(data.course[x].course_id).bind(this)} underlayColor='#e3e0d7'>
        <Text style={styles.child}>{data.course[x].title}</Text>
        </TouchableHighlight>
        </View>
      );
    }
////////////
    return (
      <Accordion
        header={header}
        content={content}
        easing="easeOutCubic"
      />
    );
  }

  renderLoadingView() {
    return (
      <View style={styles.loading}>
        <Text style={styles.loading}>
          Fetching Courses, please wait...
        </Text>
      </View>
    );
  }
}

module.exports = Courses;

提前致谢！

更新：现在第一个错误消失，但它在一行中显示数组中的所有行。我尝试添加{'\ n'}但它没有用。任何想法如何解决这个问题？或者我应该使用样式表吗？

var content = [];
    for(var x=0; x < Object.keys(data.course).length; x++){
      content.push(

        <TouchableHighlight underlayColor='#e3e0d7'>
        <Text style={styles.child}>{data.course[x].title}</Text>
        </TouchableHighlight>

      );
    }
    var clist = (
      <View style={styles.rowContainer}>
      {content}
      </View>
    );
////////////
    return (
      <Accordion
        header={header}
        content={clist}
        easing="easeOutCubic"
      />
    );

更新2：

为touchablehighlight添加一个键确实解决了第二个问题。感谢

Answer 1

所以我在facebook上看了一个关于listview的例子，他们以此为例。要摆脱第二个警告，请尝试提供key属性。这个例子是在_renderSeperator函数

中提供它

 <UIExplorerPage
    title={this.props.navigator ? null : '<ListView>'}
    noSpacer={true}
    noScroll={true}>
    <ListView
      dataSource={this.state.dataSource}
      renderRow={this._renderRow}
      renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
      renderSeparator={this._renderSeperator}
    />
  </UIExplorerPage>

这是renderSeperator及其外观

 _renderSeperator: function(sectionID: number, rowID: number, adjacentRowHighlighted: bool) {
    return (
      <View
        key={`${sectionID}-${rowID}`}
        style={{
          height: adjacentRowHighlighted ? 4 : 1,
          backgroundColor: adjacentRowHighlighted ? '#3B5998' : '#CCCCCC',
        }}
      />
    );
  }
});

你可以在这里查看完整的例子 https://facebook.github.io/react-native/docs/listview.html

和其他stackoverflow建议 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `ListView`

至于第一个警告，看起来你的Accordian的内容属性有问题。当它应该只有一个元素时，你给它一个元素数组。尝试将数组包装在一个

中

<View> //<Content /> </View>

因为它看起来像是

中的Conent

  <Accordion
    header={header}
    content={content}
    easing="easeOutCubic"
  />

看起来像这样

`<Content />
<Content />
<Content />
<Content />
<Content />
//etc... one for every row in the array`

我无法测试，因为我没有我的mac所以请确认。

React Native，警告：失败propType：提供的无效道具内容预期单个ReactElement

1 个答案: