Question

在父组件中有一个文本字段，我想过滤通过子串传递道具的多个子组件。子组件是通过map函数输出的，该函数还将数据从API导入道具。在作为道具传递给子对象（searchTerm）之后，我有用户输入控制台日志记录。我的问题是我无法根据用户的输入隐藏单个组件的显示。我遇到的麻烦是，当一个人决定隐藏自己时，他们都会这么做。我试过indexOf，发现include（）更有用。我担心我对问题的处理方式，并且会感谢经验丰富的开发人员的一些智慧。

//父组件

render() { 

    return ( 
    <React.Fragment>

        <input type="text" className = {styles.searchField} id="searchField" placeholder = "Search..." onChange = {this.getUserInput}/>

            <div className={styles.container}>
                {this.state.importedBooks.map((element, index) => (
                    <Tile key ={index} searchTerm ={this.state.searchTerm} buy ={element.amazon_product_url} 
                    img ={element.book_image} summary ={element.description} url={element.book_image} 
                    book_author ={element.author} book_title ={element.title} />
                ))}      
            </div> 

    </React.Fragment>);
}

}

//子组件

Tile类扩展了React.Component {

public state:{display:boolean} = {display:true};

public getContainerContent = () => {

    const containers: NodeListOf<Element> | null = document.querySelectorAll("#container");

    containers.forEach(element => {
    if (element.innerHTML.toLocaleLowerCase().includes(this.props.searchTerm) !== false) {
        this.setState({display:true});
    }
    else if (this.props.searchTerm == "") {
        this.setState({display:true});
    }
    else {
        this.setState({ display: false });
    }
})

};

public componentWillReceiveProps = () => {
    this.getContainerContent();
}

render() { 
    const renderContainer = this.state.display ? styles.container : styles.hideDisplay; 

    return ( 
    <div className={styles.container} id="container">
        <h1>{this.props.book_title}</h1>
        <h2>{this.props.book_author}</h2>
        <a href={this.props.buy} target="_blank"><img src = {this.props.img} alt="book cover"/></a>
        <p>{this.props.summary}</p>
        <a href={this.props.buy} target="_blank">Purchase</a>
    </div> );
}

}

Answer 1

我认为问题源于子组件中的getContainerContent方法。
为什么单个子组件会关心属于其他子组件的数据？

一种解决方法是首先在父组件中声明，在显示子组件时要与过滤器匹配的道具。
然后，您可以遍历这些声明的道具，并确定该组件是否应该显示子组件。

// parent comp
private shouldDisplayElement (element, searchTerm: string): boolean {
    const propsToMatchFiltersAgainst = ['book_title', 'book_author', 'buy', /* etc... */];

    let shouldDisplay = false;

    for (const p of propsToMatchFiltersAgainst) {
        if (`${element[p]}`.toLowerCase().includes(searchTerm.trim())) {
            shouldDisplay = true;
        }
    }

    return shouldDisplay;
}

// parent's render fn
<div className={styles.container}>
    {this.state.importedBooks.map((element, index) => (
        this.shouldDisplayElement(element, this.state.searchTerm)
            ? <Tile 
                key={index} 
                buy={element.amazon_product_url}
                img={element.book_image} 
                summary={element.description} 
                url={element.book_image}
                book_author={element.author} book_title={element.title} 
            />
            : null
    ))}
</div>

这样，鉴于当前的情况，您不再需要在子组件中使用getContainerContent方法。

如何使用通过道具传递的字符串过滤组件的内容？

1 个答案: