React为子组件添加两个父组件

问题描述

状态是智能组件，用于存储子组件的所有状态

import React from 'react';

import TextArea from './Components/TextArea';
class State extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        name: ''
      }
      this.myChangeHandler = this.myChangeHandler.bind(this)


    }
    myChangeHandler = (event) => {
        event.preventDefault();
        this.setState({
            [event.target.name]:event.target.value
            
        });
    }
    render() {
      return (
         <div>
           {/* Change code below this line */}
           <TextArea name = {this.state.name}
           myChangeHandler = {this.myChangeHandler}/>
           
           {/* Change code above this line */}
         </div>
      );
    }
  };


export default State;

现在TextArea是共享输入值到状态的子组件。

import React from 'react';
import '../style.css';

class TextArea extends React.Component {
    constructor(props) {
      super(props);
    }
    render() {
      return (
      <div>
        
        <input type="text" onChange= {this.props.myChangeHandler} name="name" value={this.props.name}></input>
        <h1>Hello,my name is:{this.props.name} </h1>
        
      </div>
      );
    }
  };
  

export default TextArea;

有几个子组件将数据发送到状态组件。 因此应用程序组件用于订购子组件。

我需要两个父母作为孩子的一部分。请查看图片enter image description here

import React from 'react';
import { browserRouter,Route } from 'react-router-dom'
import './App.css';
import TextArea from './Components/TextArea'

function App() {
  return (
    <div className="App">
      <browserRouter>
        <Route path = "/new" component= {TextArea} />
      </browserRouter>
      
    </div>
  );
}

export default App;

解决方法

单个组件不能有两个“直接”父级，但是可以有多个间接父级。
示例：

• 应用是国家/地区的父母
• 州是TextArea的父级
• 应用程序也是TextArea的父级，但不是直接父级。

这意味着您可以将顶级父母的道具（数据和功能）传递给他的所有子女。 如果需要将功能从App传递到TextArea，则需要按州传递。 这里是tutorial的用法说明。 您还可以使用Context，这是有关操作方法的教程。