Question

下午好，我一直在墙上撞了几个小时，试图更新一个更大的组件<Navigation />的子组件的状态或道具，以反映我网站上显示的内容。 / p>

这是大局，我认为这很容易，但事实并非如此。这是我的代码：

// This is the parent component 
var Navigation = React.createClass({

  getInitialState: function(){
    var endpoints = require("./data/naviEnd.js");
    return {
      endpoints: endpoints
    }             
  },

  renderEndpoints: function(key){
    var endpointDetails = this.state.endpoints[key];
    return(
      <NavEndpt activeRoute={this.props.activeRoute} toggleState={this.toggleState} id={endpointDetails.id} key={endpointDetails.title} url={endpointDetails.url} title={endpointDetails.title}/>
    )

  },

  render: function() {
    return(
        <div id="navigation">
            {Object.keys(this.state.endpoints).map(this.renderEndpoints)}
        </div>
    )
  }
});

// this is the child component that renders the div and links contained inside
var NavEndpt = React.createClass({

  handleClick: function() {

  },

  render: function() {

    return(
      <div id={this.props.id}>
        <Link className={this.props.active} onClick={this.handleClick} id={this.props.id + "-link"} to={this.props.url}>{this.props.title}</Link>
      </div>
    )
  }
})

我一直在尝试一系列方法来更新状态并使用道具传递信息，但没有任何作用。我的<Navigation />组件没有this.props.children，我认为它会有两个子组件<NavEndpt />。我真的迷路了，我希望得到一些帮助React Docs不是很有帮助，我需要一个人帮我解决这个问题。

Answer 1

所以我想我开始问你为什么认为导航应该有this.props.children - 我知道它有两个孩子，但它并没有将它们作为道具传递。它正在创造它们。如果像这样被调用它会收到一个子道具：

<Navigation>
  <div>This is a child!</div>
</Navigation>

div将作为一个名为＆＃34; children＆＃34;。

的道具传入

现在，如果您尝试更改导航状态并将其中的一些信息传递给NavEndpt，则可以设置如下内容：

var Navigation = React.createClass({

  getInitialState: function() {
    var endpoints = require("./data/naviEnd.js");
    return {
      endpoints: endpoints
    }             
  },

  changeEndpoints: function() {
    // Get new endpoints somehow
    this.setState({endpoints: newEndpoints});
  }

  render: function() {
    return(
      <div id="navigation">
        <NavEndpt endpoints={this.state.endpoints} />
      </div>
    )
  }
});

这将导致NavEndpt接收新的道具，它们是导航状态中的当前端点，无论何时它们被更新（因为我在我的哑函数中有代表点击或者ajax请求或其他什么得到新的终点。）

希望有所帮助，你的问题有点模糊。

更改组件的状态以反映所选页面ReactJS

1 个答案: