在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 ，這將導致重新渲染，或者通過傳遞回調（如示例所示）。