reactjs - 反应为子组件添加两个父母

问题描述

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

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;

有几个子组件将数据发送到状态组件。所以 app 组件用于对子组件进行排序。

我需要两个父母作为子组件。请看图片在此处输入图片描述

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;

标签： reactjscomponentsparent

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

App 是 State 的父级
State 是 TextArea 的父级
App 也是 TextArea 的父级，但不是直接的父级。

这意味着您可以将道具（数据和函数）从最高父级传递给他的所有子级。如果您需要将函数从 App 传递到 TextArea，则需要按 State 传递。这里有一个关于如何做的教程。您也可以使用上下文，这里有一个关于如何做到这一点的教程。

reactjs - 反应为子组件添加两个父母

问题描述

解决方案

推荐阅读