在react.js中访问来自父项的子项的变量

Question

我试图从我的父类访问我的子类中的变量“名称”。 我在这个项目上使用react路由器。 我已经使用React几天了，所以我愿意接受任何建议或重构。

儿童班：

import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router';

export default React.createClass({
render: function() {
    return (
       <ul className="list">
            {this.props.business.map(function(business, i) {
                    let Name = Object.keys(business).length - 1;
                    return (
                        <li key={business.id}>
                            <Link to="/" className="inner">
                                <div className="li-img">
                                    <img src={business.image} alt="Image Alt Text" />
                                </div>
                                <div className="li-text">
                                    <h4 className="li-head">{business.name}</h4>
                                    <p className="li-sub">Summary of content</p>
                                </div>
                            </Link>
                       </li>
                    );
                })}
        </ul>
    )
}
});

家长班：

import React from 'react';
import Business from './businesses';
import { getBusiness } from 'api/global';

export default React.createClass({
  getInitialState: function() {
    return {
        business: [],
    }
},
  componentWillMount: function() {
      var _this = this;
       getBusiness().then(function(response) {
          _this.setState({
            business: response.data
        })
    }).catch(function(err) {
        console.error(err);
    });
},

  render: function() {
    return (
        <Business business={this.state.business} text={Name} />
    )
   }
});

Answer 1

我认为你不能直接做你在这里尝试的事情。

在渲染Business您需要知道要传递给它的值。 你的“构造”就像问“我想将一个参数传递给一个由我正在调用的函数计算的函数”。

组件之间的通信为您提供了所需内容的提示：在计算新值（ Name ）之后导致重新呈现的某些事件。

这可以通过Business更新状态变量Name ，这将导致重新渲染，或者通过传递回调（如示例所示）。