什么是处理React状态和道具的正确方法

Question

我使用React已有一段时间了，我尝试了许多不同的方法来实现，它们都有其优点和缺点，因此我想弄清楚哪种方法是可行的。

因此，我有一个示例场景：-一个（智能）父组件，侦听一个磁通量存储-一个（笨拙的）子组件由父组件在上面呈现，仅呈现视图并具有一些“小的内部逻辑”，并且我的意思是，某些逻辑无法由外部操作处理，例如，更新其输入值的onChange事件。

我是否应该仅将我想传递给子组件的任何东西作为道具传递，并且不要弄乱它的状态。 因此，无论我需要执行什么小逻辑，都可以直接更新其道具（即使我知道也不建议直接更新其道具）？

要么

我将想要传递给子组件的所有道具传递给了子组件，然后在getInitialState中“获取它们”，使用它的now状态变量进行小的逻辑处理吗？

第二种方法的问题是，当我实际上从子组件发送一个动作，而父组件侦听存储结果并进行更新时，除非重新更改其键，否则我现在很难重新渲染子组件。价值，我也认为不应该这样。

第一种方法，甚至是我在更改道具时，就像我说的那样，我认为这样做也不是最好的事情，在发送一个动作后，重新呈现子组件没有问题更新父组件正在侦听的商店。

可能还有其他方法可以做到，并且肯定有更好的方法。 这就是我想要看到的。 让我知道问题是否令人困惑，我将尝试以其他方式进行解释。

谢谢！

Answer 1

您只能从主（父）组件设置状态。 所有子组件均应为“哑”组件。 如果您需要操纵子组件的状态...在父组件中具有修改所需状态的功能...然后将该功能作为道具传递给子组件。 完成更新子级状态所需的操作后，请调用作为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} 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;