React.js 渲染道具

Render Props 是 ReactJS 中的一种技术，用于在 React 组件之间使用值为函数的 prop 共享代码。子组件将渲染道具作为一个函数并调用它，而不是实现自己的渲染逻辑。简而言之，我们将一个函数从父组件传递给子组件作为渲染道具，子组件调用该函数而不是实现自己的逻辑。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

项目结构：它将如下所示。

示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React from 'react'
  
class App extends React.Component {
  render() {
    return (
      

        
Render Props Example
        
      
    )
  }
}
  
// Child component getting render props
class RenderPropsComponent extends React.Component {
  render() {
    return (
      

        
I am Child Component
        {this.props.render()}
      
    )
  }
}
  
// Parent component sending render props to the child
class SampleRenderProps extends React.Component {
  render() {
    return (
       {
          return (
            

              
 
               I am coming from render props 
              
            
          )
        }}
      />
    )
  }
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：