reactjs - 父子组件结构（ReactJS）

问题描述

我已经创建了多个处于同一级别的组件，这让我很难在它们之间传递数据。HealthForm 组件有一个输入字段，该字段接受主机 url，然后在单击按钮时获取 API。所有这些都运作良好。我需要将该 url 传递给所有其他组件（ProductForm、xForm、yForm、zForm ...）我现在拥有的是我的后端服务器保存了 url，但这会在多个浏览器使用该网页时产生影响。

我认为需要更改的是使 HealthForm 成为其他表单的父组件。但是，我的 App.js 看起来像这样，其中只有路由。单独的 HeaderTabs 链接到正确的路线...

编辑代码现在成功保存并将 url 传递给其子组件。问题是当我更新 HealthForm 中的父状态时页面会重新呈现。

class App extends React.Component {
  constructor(props) {
        super(props);
        this.state = {
            url: '',

        };
        this.setURL = this.setURL.bind(this);
  }

  setURL(page) {
        this.setState({
            url: page
        });
        console.log("Parent url: " + this.state.url);
  }

 render(){
  return(
    <MuiThemeProvider>
        <Router>
            <div className="App">

                <Route path="/" component={()=>(
                    <div>
                        <Header/>
                        <HealthForm changeUrl={this.setURL} urlProp={this.state.url}/>)}>/>
                    </div>)}/>

                <Route path="/path1" component={ProductForm}></Route>
                <Route path="/path2" component={xForm}></Route>
                <Route path="/path3" component={yForm}></Route>
                <Route path="/path4" component={zForm}></Route>

            </div>
        </Router>
    </MuiThemeProvider>
  );
 }
}

健康表格

class HealthForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        exampleURL: '',
        exampleURLError: '',
        status: '',
        showStatus: false
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
 }

 validate = () => {
 //…checks for input errors
           }
 shouldComponentUpdate(nextProps, nextState) {
        return nextProps !== nextState;
    }

 handleChange(event) {
    this.setState({
        [event.target.name]: event.target.value
    });
 }

 handleSubmit(event) {
    event.preventDefault();
    const err = this.validate();
    let that = this;
    if (!err) {
                       this.setState({
            exampleURLError: ''
        });
        console.log(this.state);
        var data = this.state.exampleURL

         fetch('http://somehost/health', {
                    method: 'POST',
                    body: JSON.stringify(data)
                })
                .then((res) => {
                    var promiseStatus = res.text();
                    promiseStatus.then(function (value) {
                        console.log("StatusHA: " + value);
                        that.setState({
                            status: value,
                            showStatus: true
                        });

                        if (that.shouldComponentUpdate(that.state.jarvisURL, that.props.urlProp)) 
                            that.props.changeUrl(that.state.jarvisURL);
                    });
                }).catch((error) => {
                    console.log("Error: " + error);
                });
    }
 }

 render() {
        return (
            <form>  
            <TextField
              ...
            />
            <br/>

             <Button variant="contained" size="small" color="primary" onClick={e => this.handleSubmit(e)} >
                Check
            </Button>
            <br />  <br /> 

              ...

            </form>  
        );
 }


}
export default HealthForm;

所有其他表格都与 HealthForm 非常相似。

如何重新组织我的代码以使 HealthForm 成为父组件？或者创建一个全新的父组件，所有表单都是它的子组件是一个更好的选择？如果是这样，有什么建议吗？

编辑

我进行了 Snaz 建议的更改，成功地将 url 发送到 App 的状态，但现在

 this.props.changeUrl(url);

导致整个应用程序刷新？

标签： reactjscomponentsstructure

为什么不向 HealthForm 传递一个函数，它会改变 App 状态的属性，并且通过改变状态它会刷新并将其发送到其他表单？像这样的东西：

应用程序：

class App extends React.Component {
state = {
    url: ''
}

foobar(page){
    this.setState({
        url: page
    });
}

 render(){
  return(
[code here...]
                    <HealthForm changeUrl={this.foobar}/>
[code there...]
  );
 }
}

在 HandleSubmit 的 HealthForm 中，您只需调用：

this.props.changeUrl(url);

这应该将页面提供给 App，然后您可以通过此处显示的类似方式将此 url 传递给其他表单： https ://github.com/ReactTraining/react-router/issues/4105

reactjs - 父子组件结构（ReactJS）

问题描述

解决方案

推荐阅读