From 6a5573b6ca2ef59fa7660e5bd7f3734beb2a40e1 Mon Sep 17 00:00:00 2001
From: Benjy Cui <benjytrys@gmail.com>
Date: Tue, 22 Mar 2016 16:53:38 +0800
Subject: [PATCH] feat: support React.Component in marks

---
 examples/marks.js | 4 ++--
 src/Marks.jsx     | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/examples/marks.js b/examples/marks.js
index 4413dc5..b7cc9e9 100644
--- a/examples/marks.js
+++ b/examples/marks.js
@@ -7,7 +7,7 @@ const Slider = require('rc-slider');
 const style = {width: 400, margin: 50};
 const marks = {
   '-10': '-10°C',
-  0: '0°C',
+  0: <strong>0°C</strong>,
   26: '26°C',
   37: '37°C',
   50: '50°C',
@@ -15,7 +15,7 @@ const marks = {
     style: {
       color: 'red',
     },
-    label: '100°C',
+    label: <strong>100°C</strong>,
   },
 };
 
diff --git a/src/Marks.jsx b/src/Marks.jsx
index 0786b08..100c6dd 100644
--- a/src/Marks.jsx
+++ b/src/Marks.jsx
@@ -20,7 +20,8 @@ const Marks = ({className, marks, included, upperBound, lowerBound, max, min}) =
     style.left = (point - min) / range * 100 - markWidth / 2 + '%';
 
     const markPoint = marks[point];
-    const markPointIsObject = typeof markPoint === 'object';
+    const markPointIsObject = typeof markPoint === 'object' &&
+            !React.isValidElement(markPoint);
     const markLabel = markPointIsObject ? markPoint.label : markPoint;
     const markStyle = markPointIsObject ?
             { ...style, ...markPoint.style } : style;