javascript - 将 Prop 传递给嵌套的子组件

Question

这是我的结构:

Main.js (Parent)
MainContainer.js
|
|_ Article.js
       |
       |__ Comments.js

现在我想在评论组件(递归组件)上设置点击处理程序并发送一个 Action 。

这是我在 comment.js 上的代码

class Comment extends Component {
    deleteComment = (id) => {
        this.props.handleDelete(id)
    }
    render() {
        var comment = this.props.comment
        return (
            <div className={styles.commentsWrapper}>
                <ul>
                    <li>
                        <div className={styles.commentsName}>
                            <a onClick={() => this.deleteComment(comment.id)} className={styles.commentsNameRight}>
                            </a>
                        </div>
                        <p>{comment.body}</p>
                        {comment.children.length > 0 && comment.children.map(function(child) {
                            return <Comment comment={child} key={child.id}/>
                        })}

                    </li>
                </ul>
            </div>
        );
    }
}
export default Comment;

和 Article.js :

 class Article extends Component {    

        handleDeleteComment = (id) => {
            this.props.deleteComment(id)
        }


        render() {
            return (
                <article className={styles.articleItem}>
                        {this.props.comments.map(item =>
                            <Comment handleDelete={this.handleDeleteComment} comment={item} key={item.id}/>)}
                </article>
            );
        }
    }


    export default Article;

和 Main.js

class Main extends Component {
    deleteComment = (id) => {
        this.props.deleteCommentRequest(id)
    }

    render() {
        return (
            <div className="">
                <Header />
                <section className="container">
                    <div>
                        {
                            !this.props.articles.loading && this.props.articles.articles? (
                                <div>
                                    {this.props.articles.articles.map(item =>
                                        <Article
                                        bodytext={item.selftext}
                                        key={item.id}
                                        comments={item.finalComments}
                                        deleteComment={this.deleteComment}
                                        />)}
                                </div>

                            ) : (
                                <div className={styles.loading}> <Spin /> </div>
                            )
                        }
                    </div>
                </section>
            </div>
        );
    }
}

export default Main;

所以我在这里所做的是:将 deleteComment 作为 props 从 main 传递到 article，然后再次将 handleDelete 从 article 传递到 comment。

不确定这样做是否是一个好方法？

提前致谢

Answer 1

对于 2 - 3 深度的组件，这种模式没有错，因为这就是数据从子级流向祖先的方式。但是，如果您的应用程序变得越来越重，有多个层，请考虑使用不同的状态管理，例如 redux，其中维护全局状态并且任何组件都可以订阅它并调度操作。更多关于 here .

或者，您也可以使用带有 useContext 的 React Hooks 实现相同的效果，您可以在其中设置上下文，任何子组件都可以订阅它。示例:

const MyContext = React.createContext();

export default function App({ children }) {
  const [items, setItems] = React.useState([]);
  return (
    <MyContext.Provider value={{ items, setItems }}>
      {children}
    </MyContext.Provider>
  );
}

export { MyContext };

现在，在任何深度的任何子级中，只要它在 App 组件的子级中，您就可以这样做:

import {MyContext} from './filename';

function TodoItem() {
  const { items, setItems } = React.useContext(MyContext);
  return (
    <div onClick={() => setItems(1)}>

    </div>
  );
 }