Question

我正在尝试编写一个<Heading />组件，它将结合可访问性标准来解决处理标题（h1，h2等）的一些麻烦。

目标是该组件能够根据其最接近的父标题动态选择h（1,2,3）。但是，像这样查找DOM树让我想起更多jquERY而不是反应。我已经查看了文档，但是没有看到任何关于它的内容，所以我不确定这是否可能。

所以问题是：组件是否有可能知道它在DOM树中的呈现位置，然后用该信息执行一些逻辑？（可能在componentWillMount中的某个地方）。

Answer 1

您可以在componentDidMount和componentDidUpdate中向上查看DOM，但这很麻烦且无法控制。可能有一个更好的解决方案，但这是首先想到的。

var headerFactories = ['h1', 'h2', 'h3', 'h4'].map(function(tag){ 
    return React.createFactory(tag)
});
var makeHeader = function(level){
    var make = function(){
        var factory = headerFactories[make.level] 
                   || headerFactories[headerFactories.length - 1];
        return factory.apply(this, arguments);
    };
    make.sub = function(){
        return makeHeader(make.level + 1);
    };
    make.level = level;
    return make;
}

api可能看起来有点奇怪，但是我们说我们有一个Page组件和一个Article子，它可能有另一个Article子。

var Page = React.createClass({
   render: function(){
      // make a root level header
      var header = makeHeader(); 
      return <div>
        {header(null, "My Page")}
        <Article headerFactory={header.sub()} data={foo} subArticle={bar} />
      </div>
   }
});

var Article = React.createClass({
   render: function(){
      var subArticle = false;

      if (this.props.subArticle) {
         subArticle = <Article headerFactory={this.props.headerFactory.sub()} />
      }

      return <div>
         {this.props.headerFactory(null, this.props.data.title)}
      </div>
   }
});

当我们headerFactory(null, "foo")我们得到该标题级别的组件时会发生什么。当我们调用.sub()时，我们会获得具有下一个标题级别的headerFactory版本。

var h1 = makeHeader();
var h2 = h1.sub();
var h3 = h2.sub();
var h4 = h3.sub();

这允许组件具有基于其父级的标题级别，而不会破坏React。

组件可以知道自己的DOM树上下文吗？

1 个答案: