React 组合与继承

阅读数:53 评论数:0

跳转到新版页面

分类

html/css/js

正文

包含关系

有些组件无法提前知晓它们子组件的具体内容. 在Sidebar和Dialog等展现通用容器的组件中特别容易遇到这种情况.

我们建议这些组件使用一个特殊的children prop来将他们的子组件传递到渲染结果中:

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}
function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}

少数情况下, 可能需要在一个组件中预留几个"洞". 这种情况下, 我们可以不使用children, 而是自行约定: 将所需内容传入props, 并使用相应的prop.

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}
 
function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } />
  );
}

特殊关系

有些时候, 我们会把一些组件看作是其他组件的特殊实例, 比如WelcomeDialog可以说是Dialog的特殊实例.

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
    </FancyBorder>
  );
}
 
function WelcomeDialog() {
  return (
    <Dialog
      title="Welcome"
      message="Thank you for visiting our spacecraft!" />
  );
}

我们推荐使用组合而非继承来实现组件间的代码重用.

 




相关推荐

Redux DevTools 浏览器安装此插件,npm start之后,F12,点击Redux, 可跟踪Action以及state的变化。 React Deve

react原生动态添加多个className会报错: import style from './style.css'

Javascript单元测试框架对比 1. Jasmine 带有断言, spies(用来模拟函数的执行环境)和mocks. 2. AVA <

在多人开发时,当被人使用自己定义的组件时,有可能出现类型传错的情况,而在自己的组件上加上prop-

import defaultcomponent,{a,b,c...} from 'XXX'<br

通常, 多个组件需要反映相同的变化数据, 这时我们建议将共享状态提升到最近的共同父组件中去. 示例:

受控组件 在HTML中, 表单元素之类的通常自己维护state, 并根据用户输入进行更新. 而在React中, 可变状态通常保存在组件的state属性中, 并且只能通过使用se

基础列表组件 function NumberList(props) { const numbers = pr

React中的条件渲染和Javascrip中的一样, 使用Javascrip运算符if或者条件运算符去创建元素来表现当前的状态, 然后让React根据它们来更新UI. <pre clas

(1)React事件的命名采用小驼峰式(camelCase), 而不是纯小写. (2)使用JSX语法时你需要传入一个函数作为事件处理函数, 而不是一个字符串. 传统的