Question

我遇到了React和Redux的问题。这就是问题所在：

我有一个从Redux（mapStateToProps）

接收一些值的Component

我有子组件有两个函数：render（）和renderFoo（）

问题是我可以从孩子的渲染（）中访问道具，但我不能在renderFoo（）中使用它。这是代码：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../actions';
import Child from './child';

class Root extends Component {

  componentWillMount() {
    if(this.props.foo) {
      this.props.getFoo(this.props.foo);
    }
  }

  render () {
    console.log(this.props);
    return (
      <Child foo={this.props.foo}
    )
  }
}


function mapStateToProps(state) {
  return {
    foo: state.foo.value
  };
}

export default connect(mapStateToProps, actions)(Root);

和子组件：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../actions';

class Child extends Component {

  componentWillMount() {
    console.log(this.props.foo)
    if(this.props.foo) {
      this.props.getChild(this.props.foo);
    }
  }

  renderFoo() {
    return (
      { this.props.foo }
    )
  }

  render() {
    console.log(this.props.foo) // this works
    return (
      <div>
        { this.props.foo } // this works // this works
        { this.renderFoo() } // this prints nothing
      </div>
    )
  }
}

export default connect(mapStateToProps, actions)(Child);

任何想法如何使其发挥作用？

编辑：

这里是我的子组件的完整代码：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../actions';
import { Container, Row, Col } from 'reactstrap';
import TimeAgo from 'react-timeago';
import { Link } from 'react-router-dom';

class MediaComments extends Component {

  componentWillMount() {
    console.log(this.props.media)
    if(this.props.media) {
      this.props.getMediaComments(this.props.media);
    }
  }

  renderComments() {
    if(this.props.comments) {
      let c = this.props.comments;
      return [
        Object.keys(c).map(function(key, val) {
          return (
            <div className="news">
              <div className="excerpt">
                <div className="brief">
                  <Link className="name" to={`/profile/${c[key].author_id}`} className="nav-link">{ c[key].first_name } { c[key].last_name }</Link>
                  <div className="date"><TimeAgo date={ c[key].timestamp } /></div>
                </div>
                <div className="added-text">
                  { c[key].comment }
                </div>
              </div>
            </div>
          )
        })
      ]
    } else {
      return [
        <p>No comments</p>
      ]
    }
  }

  render() {
    return (
      <div className="feed">
        { this.props.mediaId }
        { this.renderComments() }
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    authenticated: state.auth.authenticated,
    comments: state.comments
  };
}

export default connect(mapStateToProps, actions)(MediaComments);

Answer 1

查看问题所在，当您编写<div>{this.props.foo}</div>时，它会起作用，因为您在div内呈现了值。

现在你写的时候：

renderFoo() {
    return (
      { this.props.foo }
    )
}

这有两个问题，因为{a}的含义是{a: a}：

1-你返回一个对象并试图在JSX中渲染它，这将引发错误：

对象作为反应孩子无效。

2-对象密钥也不是有效密钥，它包含.，它也会抛出错误：

意外的令牌。

<强>解决方案：

你需要这样写：

renderFoo() {
    return ( this.props.foo )
}

或者

renderFoo() {
    return ( <span>{ this.props.foo } </span>)
}

React Redux子组件无法看到道具？

1 个答案: