Question

我是React的新手，我无法访问Login组件中的Member组件状态：

App.js：

export default React.createClass({
  getInitialState: function() {
    return {
               testp : ''
      }
  },
  componentDidMount() {    
      var abc = "asdadaddasad";
       this.setState({testp : abc})
  },
  render() {
        <div>
       <header>
            <div className="menu-trigger">
                <i className="fa fa-bars" aria-hidden="true"></i>
            </div>
            <div className="container">
                <ul className="fR clearfix">
                    <li><NavLink to="/" onlyActiveOnIndex>Home</NavLink></li>
                    <li><NavLink to="/members">Members</NavLink></li>
          <li><NavLink to="/register">Register</NavLink></li>
           <li><NavLink to="/login">Login</NavLink></li>
                </ul>
              </div>
        </header>
         <div className="content-row">
            <div className="container">
                 {this.props.children}
           </div>
        </div>
         </div>
   }
})

Login.js：

import React from 'react';
import Member from './Member';
var Login = React.createClass({
  getInitialState: function() {
    return {
      loginname : ''
    }
  },
  componentDidMount() {    
    var test = 'abc';
    this.setState({loginname : test});
  },
  render() {
    return <div>test</div>
  }
});
export default Login

Member.js：

import React from 'react';
import Login from './Login';

var Member = React.createClass({
  render() {
    return <div>{this.props.loginname}</div>
            <div>{this.props.prop11}</div>
           <div>{this.props.testp}</div>
  }
});
export default Member

如何在另一个JS文件中访问Login组件状态？有人可以帮我解决这个问题吗？

Answer 1

提升状态

如果您需要在两个不同的组件中使用给定状态，那么该状态应该存在于父组件中，然后将其传递给需要使用它的两个（或更多）组件。

所以基本上对于你的例子，你需要一个组件，例如App位于比Login和Member更高级别的Member上。然后该组件将状态作为prop传递给Login和App state.loginname = '' handleLoginnameChange(login) { this.setState(loginname: login) } render () { <Login loginname={this.state.loginname} handleLoginnameChange={this.handleLoginnameChange} /> <Member loginname={this.state.loginname} /> }，并传递函数以调用将该状态更改为props。

<强>伪代码

loginname

访问子组件中的loginname状态

以上内容使得父组件App上的Login状态作为道具传递给Member和this.props.loginname组件，在这些组件中可以访问它们loginname。

修改子组件的Login状态

在loginname中，您需要修改this.props.handleLoginnameChange(newLoginname)时，使用适当的参数（新的loginname值）调用while(rows.hasNext()) { Row nextrow = rows.next (); Iterator<Cell> cell = nextrow.cellIterator(); while (cell.hasNext()) { Cell nextcells = cell.next(); if(nextrow.getRowNum()==0 || nextcells.getColumnIndex()==0) { continue; //just skip the rows if row number is 0 and column index is 0 } else { //Do operation`` } }

我们邀请您在React的文档中详细了解：Lifting State Up

Answer 2

组件状态是本地的，从其他组件访问它通常是一种反模式。

如本文所述，有一些策略可以进行组件间通信：8 no-Flux strategies for React component communication

总结：

（1）如果您的组件具有层次关系，则应在Member中导入Login组件，loginname将prop作为Member传递给Series }。

（2）如果你的组件没有层次关系，你可以将状态提升到它们的共同祖先组件中，并通过回调和道具传递数据。

上面的文章概述了组件间通信的常用策略。强烈建议您检查一下。

Answer 3

如果您不想触发/绑定共享信息的任何事件，这是数据共享的最短方法。

只需将您的状态作为stringify值存储为组件呈现方法中的隐藏字段，然后在Jquery和JSON解析的另一个组件中重新生成它。

组件A：

<input type="hidden" id="hdnFilterState" value={JSON.stringify(this.state.selections)} />

组件B：

let selections = JSON.parse($('#hdnFilterState').val());

从另一个组件

3 个答案:

提升状态