React 更改孙子属性：对象不可扩展树遍历 React Children

React 更改孙子属性：对象不可扩展/树遍历 React Children

javascript
import React from 'react';
class Parent extends React.Component {
  render() {
    const originalProps = { name: 'John', age: 25 };
    const newProps = Object.freeze({ ...originalProps });
    return (
      
        
      
    );
  }
}
class Child extends React.Component {
  render() {
    const { props } = this.props;
    return (
      
    );
  }
}
class Grandchild extends React.Component {
  render() {
    const { props } = this.props;
    return (
      
        
Name: {props.name}
        
Age: {props.age}
      
    );
  }
}
export default Parent;

javascript
import React from 'react';
class Parent extends React.Component {
  render() {
    return (
      
        {React.Children.map(this.props.children, child => {
          if (React.isValidElement(child)) {
            return React.cloneElement(child, { newProp: 'new value' });
          }
          return child;
        })}
      
    );
  }
}
class Child extends React.Component {
  render() {
    return (
      
        {React.Children.map(this.props.children, grandchild => {
          if (React.isValidElement(grandchild)) {
            return React.cloneElement(grandchild, { newProp: 'new value' });
          }
          return grandchild;
        })}
      
    );
  }
}
class Grandchild extends React.Component {
  render() {
    const { newProp } = this.props;
    return (
      
        
New Prop: {newProp}
      
    );
  }
}
export default Parent;