React函数组件使用forward与useRef用法

 子组件的代码:

import React, {forwardRef, useRef} from 'react';

const SonComponent = forwardRef((props, formRef) => {

    return (
        <>
            <h3 ref={formRef}>h3元素</h3>
        </>
    )
})
export default SonComponent;

父组件的代码

import React, {useRef} from 'react';
import SonComponent from "./SonComponent";

function FatherComponent() {
    const childrenRef = useRef(null);

    const getChildren = () => {
        console.log(childrenRef.current)
    }

    return (
        <>
            <p>父组件</p>
            <SonComponent ref={childrenRef}/>

            <button onClick={getChildren}>获取子组件的Dom</button>
        </>
    );
}

export default FatherComponent;

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Introduction to React teaches you React, the JavaScript framework created by developers at Facebook, to solve the problem of building complex user interfaces in a consistent and maintainable way. React.js shrugs away common front-end conventions in an effort to make things more efficient - use Introduction to React to learn about this framework and more today. Get to know the React API and it’s specific JavaScript extension, JSX, which makes authoring React components easier and maintainable. You will also learn how to test your React applications and about the tools you can use while building. Once you understand these core concepts, you can build applications with React. This will help you cement the ideas and fundamentals of React and prepare you to utilize React in your own use case. What you’ll learn How to use React to maintain complex user interfaces in an efficient way How to integrate existing user interfaces and move forward with React How to manage application architecture using Flux How to easily utilize JSX, React's JavaScript extension Who this book is for Introduction to React is for a web developer who is comfortable writing JavaScript and CSS. You will apply JavaScript to build web pages that utilize the paradigm shifting React framework. Introduction to React will provide you with the tools to create maintainable complex user interfaces. Table of Contents Chapter 1: What is React? Chapter 2: The Core of React Chapter 3: JSX Fundamentals Chapter 4: Building A React Web Application Chapter 5: Introducing Flux: An Application Architecture for React Chapter 6: Using Flux to Structure a React Application
Are you tired of writing jQuery callback soup? Does your blood boil when you need to write yet another template or configuration in your Angular app? Wondering why your application structure is so complex? If so, React.js is what you've been looking for. The declarative nature of React.js will help you build a UI for large applications with data that changes over time. As a professional iOS and JavaScript frontend consultant, I always recommend that clients use the best technology available. With the latest push from Facebook, React.js has proven itself to be a solid choice to build maintainable and performant user interfaces that help our clients ship products and move fast. I was excited the moment I heard about React.js Essentials and even more excited about getting my hands on a copy. Artemij Fedosejev, a veteran web developer and technical lead at a start-up company in London, demonstrates why a declarative programming style and one-way reactive data flow is often the best way to solve real-life programming problems. Whether you're working with consumer-facing applications or university research, React.js helps you build frontend UIs on both small and large scales. You'll never be lost in code again. Learn from Artemij's real-world experience in React.js Essentials, and you'll be creating user interfaces without increasing the complexity of your web application in no time. This book has everything you need to get started with React.js. It guides you from the first steps down to the intricacies of Jest. The best way to learn is by doing, and throughout this book, you will work on a hands-on React.js project and learn how to build an application that receives and collects the latest photos from Twitter. Software is constantly evolving and always moving forward. As developers, while practicing our craft, we always reach out to new horizons that stretch and improve our understanding of how great software should be built. Historically, software development and architecture has gone from structured programming to imperative programming. This made way for object-oriented programming (OOP) to become the de facto standard of software development today. Languages such as Java, Ruby, Objective-C, and many others have been built with the OOP paradigm in mind.
Mastering Full-Stack React Web Development by Tomasz Dyl English | 28 Apr. 2017 | ASIN: B01G5LOM3I | 386 Pages | AZW3 | 12.89 MB Key Features Harness the impressive power of ReactJS and rethink full-stack web development Build dynamic web applications using the tools created by the innovators driving the tech industry Combine the powers of React, Node, MongoDB, and Falcor to create highly scalable real-time apps. Book Description Full-stack web development is being redefined by the impact of ReactJS. If MEAN demonstrated just how effective combining JavaScript frameworks and tools could be for the modern web developer, by replacing Angular with React, developers have an easier way to build isomorphic web applications where code can run on both the client and server. This book will get you up to speed with one of the latest strategies to meet the demands of today's dynamic and data-intensive web. Combining detailed insights and guidance with practical and actionable information that will ensure you can build a complete isomorphic web app, it's an essential resource for the forward-thinking developer. You'll see how its flexibility is a core part of any full-stack developer's workflow, as well as learning how to use Mongoose alongside it to make data storage safer and more reliable. What you will learn See how to build a full-stack app that is scalable and designed for the demands of modern users Create a powerful JWT-based authentication full-stack “starter-kit” Make your app extremely stable and resilient with Redux and its immutable single state tree Explore the new possibilities given by Falcor, the middleware built by Netflix Find out how Redux works alongside ReactJS – and how it makes building an isomorphic app easier Deploy and maintain your apps successfully using Docker and AWS About the Author Tomasz Dyl has worked with React since 2014. He's the technical lead developer for React Poland. The team focuses on cross-platform full-stack development usi

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值