在React中渲染列表 [英] Rendering A List in React

问题描述

我正在使用React和Firebase创建一个博客.我有一个称为Blogger的组件，该组件创建博客文章，然后将其保存在firebase中.现在，我正在尝试呈现已保存到Firebase中的所有博客文章的列表.我似乎无法获得要渲染的列表.

I am creating a blog using React and Firebase. I have a component called Blogger that creates blog posts and then saves them in firebase. Now, I am trying to render a list of all of the blog posts that have been saved into firebase. I can't seem to get a list to render.

到目前为止，我已经创建了一个名为Blogger的父组件和一个名为List的子组件.我希望List在Blogger组件中呈现博客文章标题列表.我已经像这样将道具名称传递给了List

我在做什么错了?

So far, I have created a parent component called Blogger and a child component called List. I want List to render a list of blog post titles within the Blogger component. I've passed the prop title to List like this

What am I doing wrong?

我的堆栈是webpack + React + React Router + Flux + Firebase

My stack is webpack + React + React Router + Flux + Firebase

我收到此错误:

我收到的错误消息

这是我在其中创建列表的父对象:

This is my parent object in which the list is created:

import AltContainer from 'alt-container';
import React from 'react';
import { Link } from 'react-router';
import List from './List.jsx'
import Firebase from 'firebase'

const rootURL = 'https://incandescent-fire-6143.firebaseio.com/';


export default class Blogger extends React.Component {
  constructor(props) {
    super(props);


    this.firebaseRef = new Firebase(rootURL + 'items/');




    this.state = {
      title: '',
      text: ''
  };

    this.firebaseRef.on('value', function(snapshot) {
      console.log(snapshot.val());
  });

  }



  handleInputChange = () => {

    this.setState({
      title: this.refs.title.value,
      text: this.refs.text.value});
  }


  handleClick = () => {

    this.firebaseRef.push({
      title: this.state.title,
      text: this.state.text,
      done: false
    })



    this.setState({title: '',
                   text: ''
                  });
  }


  render() {
    return (
      <div>
        <div className="row panel panel-default">
          <div className="col-md-8 col-md-offset-2">
            <h2>
                Create a New Blog Post
            </h2>
          </div>
        </div>

<h2>Blog Title</h2>
        <div className="input-group">
          <input
          ref="title"
          value={this.state.title}
          onChange = {this.handleInputChange}
          type="text"
          className="form-control"/>
          <span className="input-group-btn">

          </span>
        </div>

<h2>Blog Entry</h2>
        <div className="input-group">
          <textarea
          ref="text"
          value={this.state.text}
          onChange = {this.handleInputChange}
          type="text"
          className="form-control"/>

        </div>

        <div className="blog-submit input-group-btn">
          <button onClick={this.handleClick}
          className="btn btn-default" type="button">
            Publish Blog Post
          </button>
        </div>

        <List title={this.state.title} />



    </div>


    );
  }

}

这是我要将道具传递给的子对象:

This is the child object to which I want to pass the props:

import AltContainer from 'alt-container';
import React from 'react';
import { Link } from 'react-router';
import Blogger from './Blogger'

export default class List extends React.Component {
  constructor(props) {
    super(props);

    console.log(Object.keys(this.props.title));
  }


  render: () => {

    return (

      if(this.props.title && Object.keys(this.props.title).length === 0) {
        return <h4>enter a blog entry to get started</h4>
      } else {
        var children = [];
        for(var key in this.props.title) {
          children.push(
            <li>
              {title.text}
            </li>
          )
        }
      }

    );
  }

}

推荐答案

您的屏幕截图中的错误非常清楚.这是语法错误.

The error in your screenshot is quite clear. It's a syntax error.

以下不是合法的JavaScript:

The following is not legal JavaScript:

function foo () {
  return ( if (true) return 'hello )
}

这样的嵌套返回语句将崩溃.

Nesting return statements like this will crash.

您正在寻找的模式更像这样:

The pattern you are looking for is more like this:

function foo () {
  if (cond) {
    return <List />
  }

  return <SomethingElse />
}

另外，您编写render的方式不正确.类函数应该只是:

Additionally the way you are writing render is incorrect. Class functions should just be:

render() {
  // return stuff
}

最后，您的render方法应如下所示:

Finally your render method should something like this:

render() {
  if (this.props.title && Object.keys(this.props.title).length === 0) {
    return <h4>enter a blog entry to get started</h4>
  }

  return Object.keys(this.props.title).map(key =>
    <li>{this.props.title[key]}</li>
  )
}

这篇关于在React中渲染列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！