Reactjs 处理反应状态和道具的正确方法是什么

我已经使用React有一段时间了，我尝试了很多不同的方法来实现这一点，它们都有各自的优点和缺点，所以我想澄清哪种方法是可行的

我有一个示例场景： -（智能）父组件，侦听通量存储 -由上面的父组件呈现的（哑？）子组件只呈现一个视图，并且具有一些“小的内部逻辑”，我的意思是，一些逻辑对于由外部操作处理没有意义，例如更新其输入值的onChange事件

我应该只传递我想传递给子组件作为道具的任何东西，并且不要弄乱它的状态。所以，无论我需要做什么，我都会直接更新它的道具（即使我知道不建议直接更新道具）

或

我向子组件传递任何我想传递的道具，然后在getInitialState中“获取它们”，使用它的now状态变量执行这个小逻辑吗

第二种方法的问题是，当我实际从子组件发送一个动作时，父组件监听存储结果并得到更新，我现在很难重新呈现子组件，除非我更改它的键值，我也认为不应该这样做

第一种方法，即使我正在更改道具，正如我所说的，我认为这样做也不是最好的，在发送更新父组件正在侦听的存储的操作后，重新呈现子组件没有问题

也许还有其他的方法，当然还有更好的方法。这就是我想看到的。如果问题令人困惑，请告诉我，我会尝试用其他方式解释

---

谢谢

只能从主（父）组件设置状态。所有子组件都应该是“哑”组件。如果需要操纵子组件的状态…在父组件中有一个修改所需状态的函数…然后将该函数作为道具传递给子组件。当更新子组件中状态所需的操作完成时，调用作为prop传入的函数，该函数将在父组件中调用它，并相应地更新状态

下面是一些样板代码，让您了解我所说的内容

示例子组件：

    import React, {Component} from 'react';

    class Child extends Component {

        edit = () => {
            var state = "string";
            this.props.edit(state);
        }

handleChange = (evt) => {
this.props.inputChange(evt.target.value);

        render() {
            return (
                <button type="button" onClick={this.props.edit}>Click Me!</button>
<input type="text" name="name" onChange={this.handleChange}>
            )
        }
    }

    export default Child;

import React，{Component}来自'React'；
类子扩展组件{
编辑=（）=>{
var state=“string”；
this.props.edit（state）；
}
handleChange=（evt）=>{
this.props.inputChange（evt.target.value）；
render（）{
返回(
点击我！
)
}
}
导出默认子对象；

父组件示例：

    import React, {Component} from 'react';
    import Child from './Child';

    class Parent extends Component {

        edit = (val) => {
            this.setState({data: val})
        }

inputChange = (val) => {
  this.setState ({input: val});
}

        render() {
            return (
                <Child edit={this.edit} inputChange={this.inputChange}>
            )
        }
    }

    export default Parent;

import React，{Component}来自'React'；
从“./Child”导入子项；
类父级扩展组件{
编辑=（val）=>{
this.setState（{data:val}）
}
inputChange=（val）=>{
this.setState（{input:val}）；
}
render（）{
返回(
)
}
}
导出默认父对象；

你说即使孩子有关于onChange事件的输入？@AndréMoretzsohndeCastro不确定你在问什么……我编辑了我的回答，添加了onChange事件。如果这回答了你的问题，请告诉我。谢谢@erichardson30。是的，这回答了我的问题。但我猜你忘了将家长的值传递给孩子element…@AndréMoretzsohndeCastro我不确定你说的是什么价值。但是如果答案解决了你的问题，那么请把它标记为正确