Javascript 加载屏幕时如何将子属性/值传递给父组件

加载react应用程序时，如何将属性值从子组件发送到父组件？我有一个名为

app.js

的父组件，它呈现一个包含JSON组件的主组件。 加载react应用程序时，我的属性JSONValue（在app.js中定义）包含一个空字符串。加载react应用程序时，父组件中的JSONValue应包含子JSON组件中已定义的值。如何在初始渲染时将这些值从JSON组件发送到应用程序组件

我现在唯一可以做到这一点的方法是更改react app-->json组件中的值。然后它将值从子级发送到父级

因此： JSONValue的值在JSON组件中定义，并且仅在JSON组件发生更改时应用于app.js中的JSONValue。这应该在react应用程序加载后立即应用

APP.JS：

import React, { Component } from 'react';
import Home from './Components/Home';
import './App.css';


class App extends Component 
{
  constructor(props) {
    super(props);
    this.state = {

      JSONValues: {
        JSONValue: ""
      }
    }

    this.changeJSON = this.changeJSON.bind(this);



changeJSON(e, JSONId)
{
  const elem = e.target;
  const JSONValue = elem.value;

  let tmpJSONValues = this.state.JSONValues;
  tmpJSONValues[JSONId] = JSONValue;

  this.setState(prevState => ({
    JSONValues: tmpJSONValues
  }));
}

  render() {
    return (
        <div>
          <Home 
            JSONValues={this.state.JSONValues}
            changeJSON={this.changeJSON}
          />
        </div>
    )
  }
}

export default App;

import React，{Component}来自'React'；
从“./Components/Home”导入Home；
导入“/App.css”；
类应用程序扩展组件
{
建造师（道具）{
超级（道具）；
此.state={
JSONValues：{
JSONValue:“
}
}
this.changeJSON=this.changeJSON.bind（this）；
changeJSON（e，JSONId）
{
常数=e.目标；
const JSONValue=elem.value；
让tmpJSONValues=this.state.JSONValues；
tmpJSONValues[JSONId]=JSONValue；
this.setState（prevState=>({
JSONValues:tmpJSONValues
}));
}
render（）{
返回(
)
}
}
导出默认应用程序；

HOME.JS： 返回：

JSON.JS：

    import React, { Component } from 'react';

    export default class JSON extends Component {
        render() {
            let JSONValue = "";

            if(this.props.JSONValues){
                JSONValue = this.props.JSONValues.JSONValue;
            }

            JSONValue = 'value';

            return (
                <div>
                    <textarea className="json" spellCheck={false}  value={JSONValue}  onChange={(e) =>this.props.changeJSON(e, 'JSONValue')}>

                    </textarea>
                </div>
            )
        }
    }

从“React”导入React，{Component}；
导出默认类JSON扩展组件{
render（）{
设JSONValue=“”；
if（this.props.JSONValues）{
JSONValue=this.props.JSONValues.JSONValue；
}
JSONValue='value'；
返回(
this.props.changeJSON（e'JSONValue'）}>
)
}
}

通常，您在父组件中创建状态，然后通过道具将数据传递给子组件

在父组件中，还可以创建一个changeStateHandler，并通过props将其传递给子组件

当子级需要更新其状态时，它使用传入的changeStateHandler。然后父对象更新其状态，并通过道具将新状态传递回子对象。当孩子得到新道具时，它会重新播放

这是一个简单的人为例子：

Demo.js

import React, {useState} from 'react';

export const Parent = () => {
    const [counter, setCounter] = useState(0);
    return (
      <div>
          <div>Parent says the count is now: {counter}</div>
          <Child counter={counter} handleCounter={setCounter} />
      </div>
    );
};

const Child = ({counter, handleCounter}) => {
    const incrementCounter = () => handleCounter(counter++); 
    const decrementCounter = () => handleCounter(counter--);
    return (
        <div>
            <button onClick={incrementCounter}>+</button>
            <button onClick={decrementCounter}>-</button>
        </div>
    );
};

import React，{useState}来自“React”；
导出常量父项=（）=>{
const[counter，setCounter]=useState（0）；
返回(
家长说计数现在是：{counter}
);
};
常量子项=（{counter，handleCounter}）=>{
常量递增计数器=（）=>handleCounter（计数器++）；
常量递减计数器=（）=>handleCounter（计数器--）；
返回(
+
-
);
};

通常，您在父组件中创建状态，然后通过道具将数据传递给子组件

在父组件中，还可以创建一个changeStateHandler，并通过props将其传递给子组件

当子级需要更新其状态时，它使用传入的changeStateHandler。然后父对象更新其状态，并通过道具将新状态传递回子对象。当孩子得到新道具时，它会重新播放

这是一个简单的人为例子：

Demo.js

import React, {useState} from 'react';

export const Parent = () => {
    const [counter, setCounter] = useState(0);
    return (
      <div>
          <div>Parent says the count is now: {counter}</div>
          <Child counter={counter} handleCounter={setCounter} />
      </div>
    );
};

const Child = ({counter, handleCounter}) => {
    const incrementCounter = () => handleCounter(counter++); 
    const decrementCounter = () => handleCounter(counter--);
    return (
        <div>
            <button onClick={incrementCounter}>+</button>
            <button onClick={decrementCounter}>-</button>
        </div>
    );
};

import React，{useState}来自“React”；
导出常量父项=（）=>{
const[counter，setCounter]=useState（0）；
返回(
家长说计数现在是：{counter}
);
};
常量子项=（{counter，handleCounter}）=>{
常量递增计数器=（）=>handleCounter（计数器++）；
常量递减计数器=（）=>handleCounter（计数器--）；
返回(
+
-
);
};

通过子道具传递函数以设置装载时的父状态，如下所示：

类子级扩展React.Component{
componentDidMount（）{
常量jsonString='{“foo”：“bar”}'；
this.props.onMount（jsonString）
}
render（）{
返回null；
}
}
类应用程序扩展了React.Component{
状态={
jsonData:null
}
setJson=jsonData=>this.setState（{jsonData}）；
render（）{
返回(
父级的状态jsonData：
{this.state.jsonData}
)
}
}
ReactDOM.render（，document.getElementById（'root'））

---

通过子道具传递函数以设置装载时的父状态，如下所示：

类子级扩展React.Component{
componentDidMount（）{
常量jsonString='{“foo”：“bar”}'；
this.props.onMount（jsonString）
}
render（）{
返回null；
}
}
类应用程序扩展了React.Component{
状态={
jsonData:null
}
setJson=jsonData=>this.setState（{jsonData}）；
render（）{
返回(
父级的状态jsonData：
{this.state.jsonData}
)
}
}
ReactDOM.render（，document.getElementById（'root'））