Question

我正在使用React和Firebase创建博客。我有一个名为Blogger的组件，可以创建博客帖子，然后将它们保存在firebase中。现在，我正在尝试呈现已保存到firebase中的所有博客帖子的列表。我似乎无法获得要呈现的列表。

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

我做错了什么？

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

我收到此错误：

这是我创建列表的父对象：

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>


    );
  }

}

这是我要传递道具的子对象：

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>
          )
        }
      }

    );
  }

}

Answer 1

屏幕截图中的错误非常明显。这是一个语法错误。

以下不是合法的JavaScript：

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

这样的嵌套返回语句会崩溃。

您正在寻找的模式更像是：

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

  return <SomethingElse />
}

此外，您编写render的方式不正确。类函数应该只是：

render() {
  // return stuff
}

最后，您的render方法应该是这样的：

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>
  )
}

Answer 2

这是解决方案

Blogger.jsx

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>


    );
  }

}

List.jsx

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(this.props.blog);
  }


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

在React中渲染列表

2 个答案: