javascript - 从父节点更新子节点的 props

Question

我正在尝试为具有不同 bool 属性的组件集合(例如下拉菜单)实现一个过滤器。

最初，我的所有组件都会被渲染，但是，当我在过滤器上进行选择时，我想仅渲染与所做选择相关的组件。为此，我认为我应该有一个由我的组件填充的数组和一个将与此方法一起使用的容器 ReactDOM(array,container)仅当组件安装时。

问题是:如果我已经渲染了一组组件，它们都是同一父节点的子组件，有没有办法从父节点动态更新它们的 Prop ？我想这样做是为了实现有条件渲染，以决定渲染哪个组件。

 class EventsPlanned extends Component{ //the parent
    constructor(props){
    super(props);
    this.state={
        showAllEvents: true,
        showUnmappedEvents: false,
    }
}

componentDidMount(){
    var container = document.getElementById("eventToShowContainer");
    var arr=[];
    var eventsArrayJSON = localStorage.getItem("eventsArray");
    var eventsArray = JSON.parse(eventsArrayJSON);

    if(eventsArray.length !==0){
        for(let i=0; i<eventsArray.length; i++){
            arr.push(<Event key={i}
                        eventName={eventsArray[i].name} 
                        eventPhoto={eventsArray[i].photo} 
                        eventPeriods={eventsArray[i].periods} 
                        eventDescription={eventsArray[i].description}
                        eventTag={eventsArray[i].tag}
                        eventIsDraft={this.state.showAllEvents}
                        eventIsMapped={this.state.showUnmappedEvents}/>);
        }
        ReactDOM.render(arr, container);
    } else {
        ReactDOM.render(this.nothingToShow(), container);
    }
}

filterHandler = (item) =>{  //callback function for dropdown child
    switch(item){
        case "Events Planned":
            this.setState({
                showAllEvents: true,
                showUnmappedEvents: false,
            });
            break;
        case "Unmapped Events":
            this.setState({
                showAllEvents: false,
                showUnmappedEvents: true,
            });
            break;

nothingToShow = () =>{ //in case there aren't event
    return <div className="w3-container">
                <div className="w3-panel">
                    <h1>Nessun Evento da mostrare</h1>
                </div>
            </div>
}

render(){
    return(
            <div>
                <EventsHeader filterHandler={this.filterHandler}/>
                <div id="eventToShowContainer"/>
            </div>
        );
    }
}

export default EventsPlanned;


class Event extends Component{ // the child
    state={
        name: this.props.eventName,
        photo: this.props.eventPhoto,
        periods: this.props.eventPeriods,
        description: this.props.eventDescription,
        tag: this.props.eventTag,
        isDraft: this.props.eventIsDraft,
        showUnmapped: this.props.showUnmapped
    }

    render(){
        if(this.state.showUnmapped){
            return(
                <div className="w3-container">
                    <div className="eventPanel w3-panel">
                        <h1>name: {this.state.name}</h1>
                        <h6>description: {this.state.description}</h6>
                        <h6>{this.state.periods[0]}</h6>
                        <h6>{this.state.tag[0]}</h6>
                    </div>
                </div>
            );
        }
    }

    export default Event;

Answer 1

为此，首先，您需要在父级的 render 方法中渲染所有子级。

从 componentDidMount 中删除任何渲染逻辑，并直接在 render 方法中渲染所有标记:

// EventsPlanned component
state = {
  events: [],
  showEvents: false,
  showUnmappedEvents: false,
}

componentDidMount() {
  const eventsArrayJSON = localStorage.getItem("eventsArray");
  const events = JSON.parse(eventsArrayJSON);
  if (events.length > 0) this.setState({ events })
}

filterHandler = filter => ...

nothingToShow() {
  return (
    <div className="w3-container">
      <div className="w3-panel">
        <h1>Nessun Evento da mostrare</h1>
      </div>
    </div>
  )
}

render() {
  const { events, showAllEvents, showUnmappedEvents } = this.state
  return (
    <div>
      <EventsHeader filterHandler={this.filterHandler}/>
      <div id="eventToShowContainer">
        {events.map(e => (
          <Event
            key={e.name}
            eventName={e.name} 
            eventPhoto={e.photo} 
            eventPeriods={e.periods} 
            eventDescription={e.description}
            eventTag={e.tag}
            eventIsDraft={showAllEvents}
            eventIsMapped={showUnmappedEvents}
          />
        ))}
        {events.length === 0 && this.nothingToShow()}
      </div>
    </div>
  )
}

这样，每次父状态更改时，子级都会更新 eventIsDraft 和 eventIsMapped 属性，因为每次状态更改都意味着重新渲染。

<小时/>

您现在的做法:

initial parent's render to render container div -> componentDidMount -> getElementById to find container -> ReactDOM.render into that container`

-- 在 React 中已经过时了，现在你需要忘记与命令式 DOM 更改相关的所有内容(你好，jQuery，再见!)，把这一切都留在 2014 年，进入一个显式状态管理和声明式 UI 的美妙世界.

我提出的解决方案逻辑如下:

initial render will render nothingToShow -> componentDidMount will setState if there are any events in localStorage -> setState will trigger render -> now, if events are in state, render will draw our array of Event components

并且，在过滤器发生变化时:

filterHandler calls setState -> setState triggers render -> render reads updated this.state and renders Event's with updated EventIsDraft and EventIsMapped props

由于现在 Event 组件始终从父级接收实际的 props，我们不需要它具有本地状态，因此它变得如此简单:

const Event = props => props.showUnmapped && (
  <div className="w3-container">
    <div className="eventPanel w3-panel">
      <h1>name: {props.name}</h1>
      <h6>description: {props.description}</h6>
      <h6>{props.periods[0]}</h6>
      <h6>{props.tag[0]}</h6>
    </div>
  </div>
)

PS:不确定如何分离草稿/映射事件，因为您的代码没有清楚地反射(reflect)它