javascript - 使用 props 将子组件数据传递给父组件

Question

我对 ReactJS 完全陌生。我有一个组件(组件 A)，我想在其中单击按钮并使用 AJAX 调用从 API 获取 token 。获取成功后，我需要将其传递给另一个组件(组件 B)并有条件地渲染它( https://reactjs.org/docs/conditional-rendering.html )。

组件 A 和 B 都嵌套在单个父组件中，并且应该有条件地呈现。

class Parent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <ComponentA />
        or
        <ComponentB>
      </div>
    );
  }
}

预期结果:

ComponentA 应获取自身内部的 token 并传递给其 Parent，从而通知替换 ComponentA 并渲染 ComponentB.

我尝试过的代码:

我从这里举了一个例子:https://codepen.io/gaearon/pen/QKzAgB?editors=0010和 How to pass data from child component to its parent in ReactJS?并编写了以下代码。

class ComponentA extends React.Component {
    constructor(props){
      super(props);
      this.handleGenerateToken = this.handleGenerateToken.bind(this);
    }

    handleGenerateToken(){
      console.log("gen token");
      axios({ 
        method: 'post',
        url: 'https://<token_url>',
        mode: 'no-cors'
      }).then((result) => {
        if(result.status === 200){
          console.log({token:result.data});
          this.props.onGenerateToken({token:result.data}); //it fails here
        }else{
          console.log("Error generating token. Status code: " + result.status);
        }
      });
    }

    render(){
      return(
        <div>
          <div id="details" className="div-center">
            some ui
            <div>
            <a id="btnStart" onClick={this.handleGenerateToken} className="waves-effect waves-light btn secondary-content">Start</a>
            <a id="btnReset" className="waves-effect waves-grey btn blue-grey lighten-5 black-text outline secondary-content">Reset</a>
            </div>
          </div>
        </div>
      );
    }
}

问题是我获得了 token ，但无法使用 this.props 将其设置为 Prop 。我得到下面的信息，似乎 this 无法访问。

Uncaught (in promise) TypeError: _this4.props.onGenerateToken is not a function at :182:26

我尝试创建一个额外的变量 _self 并在 AJAX 调用的 Promise 范围之外分配 this，但这不起作用。

我不确定我这样做是否正确。如果我可以更详细地解释，请告诉我。

Answer 1

一个简单的例子:

让<ComponentA/>成为你的组件:

 handleGenerateToken(){
  console.log("gen token");
  axios({ 
    method: 'post',
    url: 'https://<token_url>',
    mode: 'no-cors'
  }).then((result) => {
    if(result.status === 200){
      console.log({token:result.data});
      this.props.onGenerateToken({token:result.data}); //it will have a handler in wrapper(parent) component
    }else{
      console.log("Error generating token. Status code: " + result.status);
    }
  });
}

让<Parent/>是你包装这个的组件 <ComponentA/>和<ComponentB/> 。根据类似 bool 值的标志有条件地渲染组件 isTokenAvailable在状态中定义

在 <Parent/>的渲染方法:

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isTokenAvailable: false,
            token:null
        };
    }

    render() {
        const isTokenAvailable = this.state.isTokenAvailable;
        return (
            <div>
                {isTokenAvailable ? (
                    <ComponentB />
                ) : (
                    <ComponentA
                        onGenerateToken={(token) => {
                            this.setState({ isTokenAvailable: true, token });
                        }}
                    />
                )}
            </div>
        );
    }
}