React Render Props模式下如何通过toggle方法控制传入按钮样式

核心思路是遵循React状态驱动UI的原则，不直接操作DOM，通过内部维护toggle状态生成对应样式，通过Render Props传递或直接克隆元素注入样式实现需求，两种常用实现方式如下：

方案1：显式传递状态与样式（灵活可控，推荐） #

将toggle方法、激活状态、预置样式封装为对象传递给Render Prop调用方，调用方按需使用即可，完全符合单向数据流规范：

import { useState } from 'react';

function App() {
    return (
        <WrapperComponent
             render={({ toggle, buttonStyle }) => <button onClick={toggle} style={buttonStyle}>Toggled button</button>}
        />
  );
}

const WrapperComponent = (props) => {
    // 内部维护toggle状态，作为样式变化的唯一数据源
    const [isToggled, setIsToggled] = useState(false);

    const toggle = () => {
        setIsToggled(prev => !prev);
        console.log('Success');
    };

    // 根据状态生成动态样式，可自定义规则
    const buttonStyle = {
        backgroundColor: isToggled ? '#1890ff' : '#fff',
        color: isToggled ? '#fff' : '#000',
        border: '1px solid #d9d9d9',
        padding: '6px 12px',
        borderRadius: '4px'
    };

    return props.render({ toggle, isToggled, buttonStyle });
};

方案2：强制注入样式（无需调用方适配） #

如果需要完全强制修改按钮样式，不依赖调用方手动绑定样式，可以使用React内置的cloneElement方法克隆调用方返回的元素，直接注入样式属性，优先级高于调用方自定义的同名样式：

import { useState, cloneElement } from 'react';

function App() {
    return (
        <WrapperComponent>
             {(toggle) => <button onClick={toggle}>Toggled button</button>}
        </WrapperComponent>
  );
}

const WrapperComponent = (props) => {
    const [isToggled, setIsToggled] = useState(false);

    const toggle = () => {
        setIsToggled(prev => !prev);
        console.log('Success');
    };

    // 要强制注入的样式
    const forcedStyle = {
        backgroundColor: isToggled ? '#1890ff' : '#fff',
        color: isToggled ? '#fff' : '#000'
    };

    // 克隆元素并注入样式，保留调用方原有其他属性
    const childElement = props.children(toggle);
    return cloneElement(childElement, {
        style: { ...childElement.props.style, ...forcedStyle }
    });
};

• 两种方案均没有直接操作DOM，完全基于React状态和内置API实现，符合React官方规范
• 方案1更灵活，调用方可以基于暴露的isToggled状态自定义更多交互
• 方案2适合需要强制统一样式的场景，对调用方无侵入

内容的提问来源于stack exchange，提问作者Unknown developer