Question

我已经使用React了一段时间，我尝试了很多不同的方法来做到这一点，它们各有优缺点，所以我想澄清一下是哪种方法。

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

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

或

我传递了我想要传递给子组件的任何道具，然后在getInitialState中“获取它们”，使用现在的状态变量做那个小逻辑？

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

第一种方法，即使我正在改变道具，就像我说的那样，我认为这也不是最好的做法，我在发送后再渲染子组件没有问题更新父组件正在侦听的存储的操作。

可能还有其他方法可以做到，而且肯定是更好的方法。这就是我想看到的。如果问题令人困惑，请告诉我，我会尝试以其他方式解释。

谢谢！

Answer 1

您应该只从主（父）组件设置状态。所有儿童成分应该是“愚蠢的”＃34;组件。如果你需要从子组件操作状态...在父组件中有一个修改所需状态的函数...然后将该函数作为prop传递给子组件。当完成更新子项状态所需的操作时，调用传入的函数作为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;

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

1 个答案: