Question

我已经写过这样的东西，但是它不起作用：

var MenuElement = (props) => (
    <div>
        {React.cloneElement(React.Children.toArray(props.children).filter(x => x.className.contains("icon"))[0],
            {
                style: {
                    width: "20px"
                }
            }
        )}
    </div>
)

ReactDOM.render(
    <MenuElement>
        <div className="icon">
            <i className="fab fa-html5">icon</i>
        </div>
        <div className="description">
            <span>description</span>
        </div>
    </MenuElement>, 
    document.getElementById("hiddenMenu")
);

我在Stackoverflow中搜索了此问题，但一无所获。
我在某个地方找到了“ classList”属性，但它也无法正常工作。

Answer 1

className是一个道具，因此您需要寻找x.props.className。要查看一个字符串是否是另一个字符串的子字符串，您想使用includes，并且最好防止根本没有className属性的元素。

示例

var MenuElement = props => {
  const icons = React.Children.toArray(props.children).filter(
    x => x.props.className && x.props.className.includes("icon")
  );

  if (icons.length === 0) {
    return <div>{props.children}</div>;
  }
  return (
    <div>
      {React.cloneElement(icons[0], {
        style: {
          width: "20px"
        }
      })}
    </div>
  );
};

ReactDOM.render(
  <MenuElement>
    <div className="icon">
      <i className="fab fa-html5">icon</i>
    </div>
    <div className="description">
      <span>description</span>
    </div>
  </MenuElement>,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

是否可以通过React中使用的className过滤子级？

1 个答案: