woocommerce/packages/js/customer-effort-score/zh-cn

客户费力程度评分

用于衡量用户满意度的 WooCommerce 实用工具。

安装

安装该模块

pnpm install @woocommerce/customer-effort-score --save

此包假定您的代码将在 ES2015+ 环境中运行。如果您使用的环境对 ES2015+ 支持有限或不支持（例如较低版本的 IE），那么使用 core-js 或 @babel/polyfill 将为这些方法添加支持。在 Babel 文档 中了解更多信息。

用法

CustomerEffortScore 组件

CustomerEffortScore 是一个 React 组件，可用于实现您自己的费力程度评分调查，并提供您自己的日志记录基础设施。

以下示例创建了一个围绕 CustomerEffortScore 的包装器组件，该组件仅将回复记录到控制台：

import CustomerEffortScore from '@woocommerce/customer-effort-score';

export function CustomerEffortScoreConsole( { label } ) {
    const onNoticeShown = () => console.log( 'onNoticeShown' );
    const onModalShown = () => console.log( 'onModalShown' );
    const onNoticeDismissed = () => console.log( 'onNoticeDismissed' );
    const recordScore = ( score, score2, comments ) => console.log( { score, score2, comments } );

    return (
        <CustomerEffortScore
			recordScoreCallback={ recordScore }
			title="My title" 
            firstQuestion="My first question"
            secondQuestion="My optional second question"
			onNoticeShownCallback={ onNoticeShown }
			onNoticeDismissedCallback={ onNoticeDismissed }
			onModalShownCallback={ onModalShown }
			icon={
				<span
					style={ { height: 21, width: 21 } }
					role="img"
					aria-label="Pencil icon"
				>
					✏️
				</span>
			}
        />
    );
};

在您的代码中像这样使用此包装器组件：

const MyComponent = function() {
    const [ ceses, setCeses ] = useState( [] );
	
    const addCES = () => {
		setCeses( 
			ceses.concat( 
				<CustomerEffortScoreConsole
					title={ `survey ${ceses.length + 1}` }
                    firstQuestion="My first question"
					key={ ceses.length + 1 }
				/> 
			) 
		);
	};

    return (
        <>
            { ceses }
            <button onClick={ addCES }>显示新调查</button>
        </>
    );
};