Question

Currentl，我正在做一个React项目。我想问一下：假设有3个组件，A，B和C. A是我的容器，B是输入容器，C是输出容器。

这是我的组件A：

import React, { Component } from 'react';
import './App.css';
import {SubmitComponent} from './submitComponent.js'
// import {OutputCo} from './TopicsContainer.js'

const containerStyle = {
  border: '2px solid black',
  width: '70%',
  height: 'auto',
  marginLeft: 'auto',
  marginRight: 'auto',
  marginBottom: '100px',
};

class App extends Component {
  render() {
    return (
      <div style={containerStyle}>
        <h1 style={{textAlign:'center'}}>Coding Exercise</h1>
        <hr />
        <SubmitComponent />
        <OutputComponent />

      </div>
    );
  }
}

export default App

组件B是SubmitComponent，组件C是OutputComponent，我的B正在获取输入并将其保存为其状态：从'react'导入React，{Component};

import React, { Component } from 'react';
const createstyleouter ={
    border : '2px solid #AAA',
    width : '98%',
    height: 'auto',
    marginLeft: 'auto',
    marginRight: 'auto',
    marginTop:'35px',
    marginBottom:'50px',
};

const createstyleinner ={
    // border: '2px solid blue',
    marginLeft: 'auto',
    marginRight: 'auto',
    marginTop: '10px',
    width: '98%',

}

export class SubmitComponent extends Component {


    constructor(props) {
        super(props);
        this.state = {
            title: '',
            desc: ''
        }
        this.newTitle = this.newTitle.bind(this);
        this.newDesc = this.newDesc.bind(this);
    }

    newTitle(e) {
        this.setState({
            title: e.target.value
        });
    }

    newDesc(e) {
        this.setState({
            desc: e.target.value
        });
    }

    render() {
        return (
            <div style={createstyleouter}>
                <div style={createstyleinner}>
                    <p><strong>Title:</strong></p>
                    <textarea style={{width:'100%', height:'20', fontSize:'17px'}} onChange={this.newTitle} maxLength='150' value={this.state.title} placeholder="Enter your topic's title"></textarea>
                    <p>Description:</p>
                    <textarea style={{width:'100%', height:'70', fontSize:'17px'}} onChange={this.newDesc} maxLength='150' value={this.state.desc} placeholder="Enter your topic's description'"></textarea>
                    <button style={{padding: '10px', marginBottom:'10px'}}>Submit</button>
                </div>
            </div>
        );
    }
}

我真的不知道如何将这个状态发送给C所以C可以发帖作为主题，请帮忙

Answer 1

如果您希望从其他组件调用方法，则必须将方法传递为props。

class Parent extends Component {
  render() {
    return (
      // pass method as props to Child component
      <Child parentMethod={this.parentMethod}/>
    );
  }

  parentMethod() {
    console.log('Hello World');
  }
}

class Child extends Component {
  render() {
    return (
      <button onClick={this.handleClick}>Fire parent method</button>
    );
  }

  handleClick() {
    // parent method passed to child is now available as props
    // you can call it now & even pass arguments if you like
    this.props.parentMethod('foo', 'bar', 2, ['foo', 'bar'], {foo: 'bar'});
  }
}

如果传递方法变得棘手（例如，一个组件想要调用组件树中完全不同位置的组件方法），则可以考虑context。

但要注意 - 阅读我链接的文档，它会使您的代码更难理解并进入。

Answer 2

你需要lift the state up所以状态作为从容器到子组件的道具传递。

Answer 3

让我们说你有一个结构

在组件B中，您需要将函数回调调用为

class A
{
getResponse:function(res)
{
set you state//
this.setState({
state:res
})

}
<B state={this.state} callback={this.getResponse}/>
<C state={this.state}  />//state is the updated state by function callback

}

现在在C组件中发送更新状态

Answer 4

在父级的构造函数中：

this.childElement = React.createRef();

在父级的子元素中：

<Child ref = {this.childElement}>

要调用使用的子方法：

this.childElement.current.aFunctionInChildClass();

有关react documentation/refs and the dom的更多信息

如何在其他组件上调用组件函数，但是从其他组件调用？应对

4 个答案: