渲染PieChart时,未知道具警告

时间:2017-08-06 14:01:39

标签: reactjs recharts

当我尝试使用内容渲染Legend组件时,出现此错误。

warning.js:36警告:未知道具verticalAlignlayoutaligniconTypeiconSizepayload标签上有chartWidthchartHeightmarginonBBoxUpdate

这是获取多个内容的图例代码,

const renderContent = (content, props) => {
  if (React.isValidElement(content)) {
    return React.cloneElement(content, props);
  } else if (_.isFunction(content)) {
    return content(props);
  }

  return React.createElement(DefaultLegendContent, props);
};

这就是为什么,它会得到未知的道具警告。因此,如何在子组件中删除这些父道具。

 //Legend tag
    <Legend verticalAlign="middle" layout="vertical" align="right" iconType="circle" content={this._LegendWithValues()}

//Custom legend content
 _LegendWithValues = () => {
        return (
            <ul className="cui-legend-content">
                {
                    this.props.data.map((entry, index) => (
                        <li key={`item-${index}` }>
                            <svg height="20" width="20">
                                <circle cx="10" cy="10" r="5" strokeWidth="3" fill={this._getColorScheme()[index]}/>
                            </svg>
                            <text style={ul_style} >{entry.name}:{entry.unit} {entry.value}</text>
                        </li>
                    ))
                }
            </ul>
        );

    }

1 个答案:

答案 0 :(得分:1)

也许与cloneElement如何克隆道具有关? https://github.com/facebook/react/issues/7692

您可以提取不需要的道具,如上例所示。