Begineer ReactJS

Question

你好，我是ReactJS的新手。我想将数据从子级发送到父级，父级到子级，反之亦然。我完成了父发送给孩子的操作，但是每当我执行孩子发送操作时，都会给我例外

index.js:1 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    in div (at Child.js:17)
    in Child (at Parent.js:35)
    in div (at Parent.js:29).

我很讨厌这个错误，从过去四天开始我尝试了许多不同的方法，有人可以解决吗？这是我的代码：

这是家长班：

import React from 'react';
import './App.css';
import Child from './Child';

class Parent extends React.Component {
    constructor(props) {
        super(props);
        console.log(props);
        this.state={
            counter:''
        };
    this.updateThisCounter = this.updateThisCounter.bind(this);

    this.myChangeHandler = this.myChangeHandler.bind(this);
    this.mySubmitHandler = this.mySubmitHandler.bind(this);
    }
    updateThisCounter(){
    this.setState({counter: this.state.counter + 1});
    }
    mySubmitHandler = (event) => {
        event.preventDefault();
        alert("child send parent " + this.state.counter);
    }
    myChangeHandler = (event) => {
        this.setState({counter: event.target.value});
    }
    render(){
        return(
            <div>
                <h1>Pass Data Child to Parent</h1>
                <input type="text" placeholder="Send Amount to Parent"
                  required value={this.state.counter}
                  onChange={this.myChangeHandler} />
                <span>{this.state.counter}</span>
                <Child triggerParentUpdate={ this.myChangeHandler } />
            </div>
        )
    }
}

export default Parent;

这是子班：

import React from 'react';

class Child extends React.Component {
    constructor(props){
    super(props);
    this.state={
        parent1:''
    };
    this.myChangeHandler1 = this.myChangeHandler1.bind(this);
    }
    myChangeHandler1 = (event) => {
    this.setState({parent1: event.target.value});
    }

    render () {
        return(
            <div>
                <button onClick={this.props.triggerParentUpdate}>
                  Update Parent</button>
                console.log({this.props.triggerParentUpdate}
                <h3>12{this.props.counter}</h3>
                <input type="text" placeholder="After click"
                  required value={this.props.counter}
                  onChange={this.myChangeHandler1} />
                  {/*
                  <h3>{this.props.data.unit}</h3>
                  <button onClick={()=>this.props.data.changeUnit("Child unit")}>
                    Click</button>
                  */}
            </div>
        )
    }
}

export default Child;

Answer 1

看来您的代码有问题。在您的子组件中，像这样编辑它：

        <div>
            <button onClick={this.props.triggerParentUpdate}>Update Parent</button>
            {console.log(this.props.triggerParentUpdate)}
            <h3>12{this.props.counter}</h3>
            <input type="text" 
                   placeholder="After click"
                   required 
                   value={this.props.counter}
                   onChange={this.myChangeHandler1} />
              {/*
              <h3>{this.props.data.unit}</h3>
              <button onClick={()=>this.props.data.changeUnit("Child unit")}>
                Click</button>
              */}
        </div>

Answer 2

enter image description here

这是我的代码MyCSS.css

.boxStyleParent{
  border: '10px solid green';
  padding: 50px;
  background: #ccaa00;
  justify-content: center;
  align-items: center;
  width: 30%; height: 400px;
}

.boxStyleChild{
  border: '10px solid blue';
  padding: 80px;
  justify-content: center;
  background: #00aaaa;
  align-items: center;

宽度：50％；高度：200px；}

Child.js

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

class Child extends React.Component {
    constructor(props){
    super(props);
    this.state={
      parent:'',
        child:''
    };
    this.myParentChangeHandler = this.myParentChangeHandler.bind(this);
    this.mySubmitHandlerParent = this.mySubmitHandlerParent.bind(this);
    }
    myParentChangeHandler = (event) => {
    this.setState({child: event.target.value});
    }
    mySubmitHandlerParent = (event) => {
      alert("You are submitting " + this.props.triggerParentUpdate);
      event.preventDefault();
    }

    render () {
        return(
          <div className="boxStyleChild">
            <button onClick={this.mySubmitHandlerParent}>Update Parent</button>
            {console.log(this.props.triggerParentUpdate)}
            <br/><br/>
            <h2>Pass Data Parent to Child</h2>
            <input type="text"
                   placeholder="After click"
                   required
                   value={this.props.counter}
                   onChange={this.myParentChangeHandler} />

            <button onClick={this.props.triggerParentUpdate}>Update Child</button>
                {console.log(this.props.triggerParentUpdate)}
              {/*
              <h3>{this.props.data.unit}</h3>
              <button onClick={()=>this.props.data.changeUnit("Child unit")}>
                Click</button>
              */}
          </div>
        )
    }
}

export default Child;

家长班：

import React from 'react';
import './MyCSS.css';
import Child from './Child';

class Parent extends React.Component {
    constructor(props) {
        super(props);
        console.log(props);
        this.state={
            parent:''
        };
    this.myChangeHandler = this.myChangeHandler.bind(this);
    this.mySubmitHandler = this.mySubmitHandler.bind(this);
    }
    mySubmitHandler = (event) => {
        event.preventDefault();
        alert("child send parent " + this.props.parent);
    }

    myChangeHandler = (event) => {
        this.setState({parent: event.target.value});
    }
    render(){
        return(
            <div className="boxStyleParent">
                <h2>Pass Data Child to Parent</h2>
                <input type="text" placeholder="Send Amount to Parent"
                  required value={this.state.parent}
                  onChange={this.myChangeHandler} />

                <span>{this.props.parent}</span>

                <Child triggerParentUpdate={ this.myChangeHandler } />
            </div>
        )
    }
}

export default Parent;