ReactJS - 渲染属性

由于 React 组件通过组合（一个组件嵌套在另一个组件内部）而不是继承来连接，因此一个 React 组件中使用的逻辑不会直接共享到另一个组件。React 提供了多种在组件之间共享逻辑的选项，其中一个选项就是渲染属性。渲染属性基本上是通过其 props 将包含必要渲染逻辑的函数传递给具有核心功能的组件。因此，它被称为渲染属性。

让我们学习如何在本章中使用渲染属性。

如何使用渲染属性

让我们看看如何逐步使用渲染属性并在两个组件之间共享逻辑。让我们考虑从外部 URL 获取和渲染数据的场景。

创建一个组件，FetcherComponent 用于从外部 url 获取数据，FetcherConsumerComponent 用于使用数据并渲染它。
为给定的 url (props.url) 创建一个带有数据获取逻辑的组件 FetcherComponent。

componentDidMount() {
   fetch(this.props.url)
   .then((response) => response.json())
   .then((data) => {
      this.setState({
         data: data
      });
   });
}

现在，更新FetcherComponent，以便核心渲染逻辑将委托给 props (this.props.render)。

render() {
   return (
      <div>
         <h2>Fetch react component</h2>
         {this.state.data && this.props.render(this.state.data)}
      </div>
   )
}

这里：

this.props.render 是具有渲染逻辑的函数，将通过其他任何组件的 props 传递到 FetcherComponent。
创建一个组件 FetcherConsumerComponent 并通过传递获取数据的渲染逻辑来渲染 FetcherComponent。

render() {
   return (<FetcherComponent url="users.json" render={(items) => (
      <ul>
         {items && items.length && items.map((item) =>
            <li key={item.id}>{item.name}</li>
         )}
      </ul>
   )} />)
}

这里：

items 是由FetcherComponent 组件获取的数据。
它们被循环遍历并发出 HTML 无序列表。

我们可以按照章节中定义的步骤，在下一节中创建一个可工作的示例。

应用渲染属性

首先，创建一个新的 React 应用，并使用以下命令启动它。

create-react-app myapp
cd myapp
npm start

接下来，打开App.css (src/App.css) 并删除所有 CSS 类。然后，创建一个组件 FetchRenderProps (src/Components/FetchRenderProps.js)，其中包含如下所示的数据获取逻辑：

import React from "react";
class FetchRenderProps extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         data: []
      }
   }
   componentDidMount() {
      fetch(this.props.url)
      .then((response) => response.json())
      .then((data) => {
         console.log(data)
         this.setState({
            data: data
         });
      });
   }
   render() {
      return (
         <div>
            <h2>Fetch react component</h2>
            {this.state.data && this.props.render(this.state.data)}
         </div>
      )
   }
}
export default FetchRenderProps;

在这里我们：

使用fetch javascript 方法在componentDidMount 事件中从外部 url 获取数据。
使用通过 props 传递的render 方法渲染获取的数据。

接下来，在 public 文件夹中创建一个文件 users.json (public/users.json) 来存储用户信息。我们将尝试使用FetchRenderProps 组件获取它并在我们的应用程序中显示它。

[{"id":1,"name":"Fowler","age":18},
{"id":2,"name":"Donnell","age":24},
{"id":3,"name":"Pall","age":26}]

接下来，在 public 文件夹中创建一个文件 todo_list.json (public/todo_list.json) 来存储待办事项列表信息。我们将尝试使用FetchRenderProps 组件获取它并在我们的应用程序中显示它。

[{"id":1,"title":"Learn JavaScript","is_done":true},
{"id":2,"title":"Learn React","is_done":true},
{"id":3,"title":"Learn Typescript","is_done":false

接下来，创建一个组件 SimpleRenderProps (src/Components/SimpleRenderProps.js) 来使用 FetchRenderProps 组件，如下所示：

import React from "react";
import FetchRenderProps from "./FetchRenderProps";
class SimpleRenderProps extends React.Component {
   render() {
      return (
         <>
            <FetchRenderProps url="users.json" render={(items) => (
               <ul>
                  {items && items.length && items.map((item) =>
                     <li key={item.id}>{item.name}</li>
                  )}
               </ul>
            )} />
            <FetchRenderProps url="todo_list.json" render={(items) => (
               <ul>
                  {items && items.length && items.map((item) =>
                     <li key={item.id}>{item.title} {item.is_done && <strong>Done</strong>}</li>
                  )}
               </ul>
            )} />
         </>
      )
   }
}
export default SimpleRenderProps;

在这里我们：

使用FetchRenderProps 和 users.json 来获取和渲染用户列表
使用FetchRenderProps 和todo_list.json 来获取和渲染待办事项列表
获取用户和待办事项列表都使用相同的FetchRenderProps 组件。

接下来，打开App.js 文件并渲染一个SimpleRenderProps 组件，如下所示：

import './App.css'
import React from 'react';
import SimpleRenderProps from './Components/SimpleRenderProps'
function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <SimpleRenderProps />
            </div>
         </div>
      </div>
   );
}
export default App;

最后，在浏览器中打开应用程序并检查最终结果。应用程序将按如下所示渲染：

总结

渲染属性是在组件之间共享逻辑的有效方法。它在许多第三方组件中被广泛使用，并取得了良好的成功率，并且它是 React 领域中经时间考验的共享逻辑方法。

打印页面