javascript - 将道具传递给嵌套的子组件(Passing props to nested child component)

Question

Here's my structure :(这是我的结构：)

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

Now i want to set click handler on comment component (recursive component) and dispatch an action.(现在，我想在评论组件（递归组件）上设置单击处理程序并调度一个动作。)

here's my code on comment.js(这是我在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;

and Article.js :(和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;

And the Main.js(还有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;

so what i did here is: pass deleteComment as props from main to article and pass again handleDelete from article to comment.(所以我在这里所做的是：将deleteComment作为props从main传递到文章，然后再次将handleDelete从文章传递到评论。)

not sure if it's a good way of doing this ?(不知道这是否是个好方法？)

Thanks in advance(提前致谢)

  ask by Enzo translate from so

Answer 1

Nothing wrong with this pattern for 2 - 3 depth of components, as that is how data should flow from children to ancestors.(对于2-3的组件深度，这种模式没有错，因为这就是数据应该如何从子级流向祖先的过程。)

But if your application is getting heavier with several layers, consider a different state management such as redux where a global state is maintained and any component can subscribe to it and dispatch actions.(但是，如果您的应用程序变得越来越重，请考虑使用其他状态管理，例如redux，其中维护全局状态，任何组件都可以订阅它并调度操作。) More on that here .(在这里更多。)

Alternatively you can also achieve the same with React Hooks with useContext where you can set the context and any child component can subscribe to it.(另外，您也可以使用带有useContext React Hooks实现相同的功能，在其中您可以设置上下文，任何子组件都可以订阅它。)

Example:(例：)

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 };

Now in any child at any level of depth as long as it is within App component's children, you can do this:(现在，只要位于App组件的子级中的任何深度的任何子级中，您都可以执行以下操作：)

import {MyContext} from './filename';

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

    </div>
  );
 }