@ 大脑/ 反应

反应 查看大脑状态管理的整合.

安装

npm install @cerebral/react react react-dom

集装箱

容器组件将您的 Craberal app 连接到您的反应组件 :

import React from 'react'
import { createRoot } from 'react-dom/client'
import App from 'cerebral'
import { Container } from '@cerebral/react'
import AppComponent from './components/App'
import main from './main'

const app = App(main)

const root = createRoot(document.querySelector('#app'))
root.render(
  <Container app={app}>
    <AppComponent />
  </Container>
)

连接

这个 connect 函数将大脑状态和序列绑定在您的反应组件上:

函数组件(建议)

import React from 'react'
import { state, sequences } from 'cerebral'
import { connect } from '@cerebral/react'

export default connect(
  {
    foo: state`foo`,
    onClick: sequences`onClick`
  },
  function MyComponent({ foo, onClick }) {
    return <div onClick={() => onClick()}>{foo}</div>
  }
)

类组件

import React from 'react'
import { state, sequences } from 'cerebral'
import { connect } from '@cerebral/react'

export default connect(
  {
    foo: state`foo`,
    onClick: sequences`onClick`
  },
  class MyComponent extends React.Component {
    render() {
      const { foo, onClick } = this.props
      return <div onClick={() => onClick()}>{foo}</div>
    }
  }
)

动态依赖

可以动态地访问大脑状态和组件内部的序列而无需预先声明:

import React from 'react'
import { state, sequences } from 'cerebral'
import { connect } from '@cerebral/react'

export default connect(function MyComponent({ get }) {
  const foo = get(state`foo`)
  const onClick = get(sequences`onClick`)

  return <div onClick={() => onClick()}>{foo}</div>
})

道具变形器

在道具到达你的组件之前,您可以通过添加变压器函数来转换道具:

import React from 'react'
import { sequences, state } from 'cerebral'
import { connect } from '@cerebral/react'

export default connect(
  // 1. Define cerebral dependencies
  {
    foo: state`app.foo`,
    onClick: sequences`app.onClick`
  },
  // 2. Transform props before they reach the component
  (cerebralProps, componentProps, get) => {
    return {
      foo: `Label: ${cerebralProps.foo}`,
      onClick: () => cerebralProps.onClick({ id: componentProps.id })
    }
  },
  // 3. Your component receives the transformed props
  function App({ foo, onClick }) {
    return <div onClick={onClick}>{foo}</div>
  }
)

变压器函数需要三个参数:

• 大脑技术: 来自大脑状态和序列的值
• 组件选项: 父组件传递的道具
• 起来: 解决大脑标记和计算值的函数

类型脚本支持

对于TypeScript用户,您可以在您连接的组件中添加静态打字. 见 类型脚本文档 详细情况.