javascript - React 上的复杂嵌套组件不起作用

Question

我是 React 的初学者，我已经环顾四周，找不到解释，所有示例都是基本的简单组件，因此与我的不匹配。

第一件事是，我试图用 React 做一个 SPA，基本的线框图是:

<HEADER> 
<CONTENT> 
<FOOTER>

只有内容在页面上发生变化。

所以为了避免重复 <HEADER>和 <FOOTER>在每个组件页面中，我找到了制作带有页眉和页脚的模板的解决方案，并将内容呈现为模板的子级，所以我得到了这个模板:

<HEADER>
    {this.children}
<FOOTER>

页面变成了:

<TEMPLATE>
    {my content here}
</TEMPLATE>

一切都很好，只是现在我的内容中的所有绑定(bind)都停止工作了，所以我的任何输入字段都可以工作。

有谁知道如何帮助我？如果有人能解释我为什么它不起作用以及如何修复，或者如何重组我的项目以便我可以获得我想要的功能，我将不胜感激。

谢谢!

下面是我的结构:

(问题出在 Perfil 组件的 render 方法上，没有一个字段显示它们的值或允许值改变)

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import * as ServiceWorker from './serviceWorker';
import Routes from './router';

import './index.css';
ReactDOM.render(
    <Routes />, document.getElementById('root')
);

ServiceWorker.register();

// router.js
import React from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';

//Pages
import Home from './component/home.component';
import Contact from './component/contact.component';
import Perfil from './component/perfil.component';
import About from './component/about.component';
import NotFound from './component/notfound.component';

const Routes = () => (     
    <BrowserRouter>
        <Switch>
            <Route exact path="/"  component={Home} />
            <Route path="/contact"  component={Contact} />
            <Route path="/perfil"  component={Perfil} />
            <Route path="/about"  component={About} />
            <Route component={NotFound} />
        </Switch>
    </BrowserRouter>
);
export default Routes;

// Perfil module
import React, { Component } from 'react';
import axios from 'axios';

import TemplateA from '../../TemplateA';
import apiUrl from '../../axiosApi';
import './index.css';

class Perfil extends Component{

    constructor(props){
      super(props);

      this.state = {
        loaded:'0',
        message:'',
        name: '',
        email: '',
        phone: '',
      };
    }

    changeHandler = e => {
      this.setState({[e.target.name]: e.target.value})
    }

    getHttp = () =>{
        apiUrl.get(`/user/1/`).then( res => {
            this.setState({
                loaded:1,
                message:'',
                name: res.data.nome,
                email: res.data.email,
                phone: res.data.phone,            
            });
        })
        .catch( error => {
            console.log("error");
            console.log(error);
            this.setState({"message": error});
        });
    }

    componentDidMount() {
      this.getHttp();  
    }

    render() {
      const {name, email, phone } = this.state;

      console.log(name);  // here works
      /*
          After the return this.state neither the declared const works.
      */

      return(
        <TemplateA>
          <div className="formPerfil">
            {
              this.state.menssage !== '' ?  (
                <span color="danger">{this.state.mensagem}</span>
              ):''
            }
            <h2>Perfil</h2>
            <hr />
            <h3>Your data</h3>
            <form name="ddP">
              <fieldset>
                <input type="text" placeholder="Name" required
                    name="name" value={this.state.name} onChange={this.changeHandler}/> 
                <input type="email" placeholder="name@email.com" required
                    name="email" value={email} onChange={this.changeHandler}/>
                <input type="text" placeholder="21900000000" maxLength="11" required
                    name="phone" value={phone} onChange={this.changeHandler} /> <br/>
                <br/>
                <input type="submit" value="Update" />
              </fieldset>
            </form>
          </div>
        </TemplateA>
      );
    }

}

export default Perfil;

// TemplateA
import React, { Component } from 'react';

import Header from './template/header'
import Footer from './template/footer'
import './TemplateA.css'

class TemplateA extends Component{

  constructor(props) {
    super(props);
    this.children = props.children;
  }

  render(){
    return (
      <div className="App">
        <Menu/>
          {this.children}
        <Footer/>
      </div>
    );
  };

};

export default App;

Answer 1

class TemplateA extends Component{

  constructor(props) {
    super(props);
    this.children = props.children;
  }

  render(){
    return (
      <div className="App">
        <Menu/>
          {this.children}
        <Footer/>
      </div>
    );
  };

};

您与 Prop 交互的唯一时间是在构造函数中。如果 Prop 发生变化，构造函数将不会重新运行，因此您将使用原始子代而不是新子代进行渲染。

无需保存 this.children。只需在渲染中直接使用 Prop :

render() {
  return (
    <div className="App">
      <Menu/>
        {this.props.children}
      <Footer/>
    </div>
  );
};