javascript - 将逻辑和 render() 函数从组件中分离出来

Question

我希望能够拥有一个渲染功能在另一个文件中的组件，以便在我的组件的逻辑和渲染之间进行分离。

天真地，我试图只做一个包含我的组件的文件，并渲染一个同名的功能组件，我将必要的道具传递给该组件，以便正确显示所有内容。

类似的东西：

// MyComponent.render.jsx
export default MyComponentRender = (props) => {
    return {
        <View>
            // render all components of my view
        </View>
    }
}


// MyComponent.js
class MyComponent extends Component {
    // some logic

    render() {
        return (
            <MyComponentRender
                aLotOfProps=....
            />
        )
    }
}

但是我很快发现自己有时不得不发送相当多的道具和+，例如我有一些 textInputs 需要成为 focus() 或 blur() 以响应我认为的某些逻辑，但结果是，我仅通过发送道具无法控制。很快就变得一团糟！

我想知道是否有一种简单的方法可以将组件的逻辑与其渲染功能分开？也许有一种方法可以将我的组件的上下文传递给我的渲染函数/组件，以便它可以直接访问所有状态并且还可以存储引用等？

谢谢，

维克多

标签： javascriptreact-nativecode-organization