Question

我有2个嵌套组件：

class Component1 extends React {
    constructor(props) {
        super(props);

        this.state = {
            person: {
                name: "Genaro",
                age: 125
            }
        };
    }

    render() {
        return (
            <SubComponent
                person={this.state.person}
            />
        );
    }
}

现在，我希望它在我的父类的状态更改时呈现SubComponent。这是由React自动完成的，但是我可以通过两种方式做到这一点：

选项1（带有状态）：

class SubComponent extends React {
    constructor(props) {
        super(props);

        this.state = {
            person: props.person
        };
    }

    componetWillReceiveProps(props) {
        this.setState({ person: props.person });
    }

    render() {
        return (
            <h1>Name: {this.state.person.name}</h1>
        );
    }
}

选项2（带有实例变量）：

class SubComponente extends React {
    constructor(props) {
        super(props);

        this.person = props.person;
    }

    componetWillReceiveProps(props) {
        this.person = props.person;
    }

    render() {
        return (
            <h1>Name: {this.person.name}</h1>
        );
    }
}

我只能使用一个类（我需要调用很多实例方法）。这就是为什么我不能这样做（更简洁的方式）的原因：

function SubComponent(props) {
    return (
        <h1>Name: {props.person.name}</h1> 
    );
}

他们两个都可以，但是：

哪个更好？在性能，可维护性等方面
我的两个选择是不好的做法吗？我该如何更好地处理此类问题？

在这种情况下我找不到示例。

在此先感谢我的英语

Answer 1

正如我试图在评论中解释的那样，您无需执行任何操作即可呈现// Check if its not null or empty if (!IsNullOrEmpty(val.ToString().ToArray())) { // Do something with val dt.Rows.Add(val); } public static bool IsNullOrEmpty<T>(T[] array) { return array == null || array.Length == 0; }。如果子组件的道具通过父组件更改，则它会重新渲染。因此，请勿将其道具设置为状态，而应直接使用道具。

Subcomponent

class Component1 extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      person: {
        name: "Genaro",
        age: 125
      }
    };
  }

  handleChange = e => {
    const { target } = e;
    this.setState( prevState => ({
      person: { ...prevState.person, name: target.value }
    }) )
  }

  render() {
    return (
      <div>
      <p>Change name</p>
      <input onChange={this.handleChange} />
        <SubComponent
          person={this.state.person}
        />
      </div>
    );
  }
}

class SubComponent extends React.Component {
  render() {
    return (
      <h1>Name: {this.props.person.name}</h1>
    );
  }
}

ReactDOM.render(<Component1 />, document.getElementById("root"));

在React中使用嵌套组件的最佳实践

1 个答案: