javascript - 在 React 子父组件中将 Props 向上传递到多级

Question

我有 3 个具有这种关系的 React 组件：

1. 家长
2. 孩子
3. 孩子的孩子

ChildofChild当单击以更新组件中的状态时，我想在组件中有一个按钮Parent。我可以Child通过道具将它发送到组件并在那里运行一个功能。

孩子的孩子

// ChildOfChild Component
export class PlaceInfoWindow extends Component {

  render() {
    const {description, name, price} = this.props

    return(
      <InfoWindow onCloseClick={this.props.closeWindow}>
        <div>
          <h1>{name}</h1>
          <p>{description}</p>
          <span>${price}</span>
          <button type="button" onClick={this.props.onAdd} className="btn btn-primary btn-success m-2">Add</button>
        </div>
      </InfoWindow>
    );
  }
}

export default PlaceInfoWindow

孩子

//Child Component
    export class PlaceMarker extends Component {
      constructor(props) {
        super(props);

        this.state = {
          showTooltip: false,
        };
      }

      clickTooltip() {
        this.setState({ showTooltip: !this.state.showTooltip });
      }

      closeWindow() {
        this.setState({ showTooltip: false });
      }

       render() {
        const { showTooltip } = this.state;
        const { lat, lng, name, price, description } = this.props;

        return (
          <Marker
            position={{
              lat: parseFloat(lat),
              lng: parseFloat(lng)
            }}
            onClick={this.clickTooltip.bind(this)}
            icon="https://image.ibb.co/cGPSW8/red_marker.png"
          >
            {showTooltip && (
              <PlaceInfoWindow
                description={description}
                name={name}
                price={price}
                closeWindow={this.closeWindow.bind(this)}
                onAdd={this.props.onAdd}
              />
            )}
          </Marker>
        );
      }
    }

    export default PlaceMarker;

家长

// Parent Component
const AirbnbMap = withGoogleMap(props => (
  <GoogleMap
    defaultCenter={props.center}
    defaultZoom={props.zoom}
    defaultOptions={{
      styles: userMapStyle
    }}
  >
    {props.places.length > 0 &&
      props.places.map(place => (
        <PlaceMarker
          key={`place${place.id}`}
          id={place.id}
          lat={place.latitude}
          lng={place.longitude}
          description={place.description}
          name={place.name}
          price={place.price}
          onAdd={this.handleAdd}
        />
      ))}
  </GoogleMap>
));

export class Map extends Component {
  constructor(props) {
    super(props);

    this.zoom = 7;

    this.state = {
      lat: 50.0515918,
      lng: 19.9357531,
      places: [       
        {
        id: 1,
        latitude: 50,
        longitude: 20,
        description: "ABC",
        name: "City",
        price: 20
      }]
    };
  }


  handleAdd = () => {
    console.log("handle add called");
  };

  render() {
    const { lat, lng, places } = this.state;
    console.log(places);
    return (
      <div style={{ width: `100%`, height: `750px` }}>
        <AirbnbMap
          center={{
            lat: lat,
            lng: lng
          }}
          places={places}
          zoom={this.zoom}
          containerElement={<div style={{ height: `100%` }} />}
          mapElement={<div style={{ height: `100%` }} />}
        />
      </div>
    );
  }
}

export default Map;

但是我怎样才能将它发送到Parent（两级）组件？通过这种方式，Child组件只会将 props 转发给Parent它从其子组件 ( ChildofChild) 获取的组件。

标签： javascriptreactjs

Answer 1

只是转发道具没问题。这包括处理程序：

class Parent extends Component {
    handle = event => { /* handle event */ };

    render() {
        return (
            <Child handler={this.handle} />
        );
    } 
}

const Child = ({handler}) => (
    <ChildOfChild handler={handler} />
);

const ChildOfChild = ({handler}) => (
    <button onClick={handler}>Click me!</button>
);