javascript - 在react.js中从父级访问子级的变量

Question

我正在尝试从父类访问子类中的变量“Name”。我在这个项目中使用 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 时，您需要知道要传递给它的值。您的“构造”就像问“我想将参数传递给由我正在调用的函数计算的函数”。

Communication between components提示您需要什么:计算新值 (Name) 后导致重新渲染的某些事件。

这可以通过业务更新状态变量Name来实现，这将导致重新渲染，或者通过传入回调(如示例所示)。