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

Question

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

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;

Answer 1

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

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

这意味着您可以将 props（数据和函数）从顶级父级传递给他的所有子级。如果您需要将一个函数从 App 传递到 TextArea，您需要通过 State 传递它。这里 tutorial 介绍如何操作。您也可以使用 Context，这里有一个关于如何操作的教程。

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

React Adding two parents for a child component

components

parent

reactjs