javascript - 在 react 中调用子函数？

Question

我有一个具有多个 View 的应用。每个View都有一定数量的映射子Entities。每个实体都有一个状态，用于指示是否折叠/隐藏，称为:this.state.show。每个Entity都有一个用于切换show状态的按钮。 一切正常。

我想做的是在View上添加一个按钮，同时显示或隐藏所有Entities。我以为这很简单，但有几个复杂的因素:

• 我最终将在应用中拥有多个 View，每个 View 以不同的方式显示相同的数据，因此将 show 存储在提升的 Prop 中并不是一个好选择。我也不想将 UI 状态存储在文件数据中，因为这会让我感到不舒服。
• 这让我更容易理解当状态作为状态而不是 View 的 prop 直接存储在 Entity 上时发生的情况
• React 文档(以及网上的每个人)说，您不应该将状态基于发生变化的 props，并且 Entities 的数量会频繁变化。这就是为什么我不想将子级的状态存储在父级中，因为如果我这样做并且实体发生了变化，那么我必须以某种方式将 Prop 的变化转换为状态的变化，这是强烈警告的。
• 如果我要使用事件，这些事件可能会从一个View 溢出到另一个。

这里采取的正确策略是什么？我是否认为“ react ”还不够？

View.jsx

import React, { Component } from 'react'
import Entity from './Entity.jsx'
import Filter from './Filter.jsx'

class View extends Component {
    render() {
        return (
            <div className="view main">
                {this.props.entities ? this.props.entities.map(
                    (e, i) => (
                        <Entity
                            entity={e}
                            propertyTypes={this.props.propertyTypes}
                            key={i}
                            index={i}
                            taglists={this.props.taglists}
                            ee={this.props.ee}
                        />
                    )
                ) : ""}
            </div>
        )
    }
}

export default View

Entity.jsx

import React, { Component } from 'react'
import Property from './Property.jsx'
import Event from './Event.jsx'
import Relationship from './Relationship.jsx'

class Entity extends Component {
    constructor (props) {
        super(props);
        this.state = {
            show: true
        }
        this.showHide = this.showHide.bind(this)
    }

    showHide() {
        this.setState({
            show: !this.state.show
        })
    }

    render() {
        return (
            <div className="entity" id={this.props.entity.name}>
                <div className="entity-header">
                    <h2>
                        <input
                            type="text"
                            value={this.props.entity.name}
                            onChange={this.emit}
                            data-original={this.props.entity.name}
                            data-index={this.props.index}
                            data-event="rename"
                        ></input>
                    </h2>
                    <button
                        className="entity-collapse"
                        data-index={this.props.index}
                        onClick={this.showHide}
                    >{this.state.show ? "-" : "+"}</button>
                </div>
                <div className={this.state.show ? "entity-content" : "entity-content hidden"}>
                    ...
                    removed for clarity
                    ...
                </div>
            </div>
        )
    }
}

export default Entity

Answer 1

你的状态应该只存在于父组件中，而不是任何子组件中。然后，您将把您的函数和状态作为 Prop 传递给 children 。