Question

这就是我尝试过的。文档似乎说this.props.children是由React管理的特殊属性，但在此示例中未定义children。我做错了什么？

＆＃13;

class Child extends React.Component {
  render() {
    return React.createElement('div', {}, this.props.content);
  }     
  someFunc() {
    log("child", this.props.content);
  }
}
           
class Parent extends React.Component {
  render() {
    return React.createElement('div', {ref: 'self'}, 
      React.createElement(Child, {content: "child A"}, null),
      React.createElement(Child, {content: "child B"}, null),
      React.createElement(Child, {content: "child C"}, null)
    );
  }
  componentDidMount() {
    console.log("children:", this.props.children);      
    React.Children.forEach(this.props.children, (child) => {
      log("child");
      child.someFunc();
    });
  }
}
            
ReactDOM.render(<Parent />, document.getElementById("react"));

function log(...args) {
  const elem = document.createElement("pre");
  elem.textContent = [...args].join(" ");
  document.getElementById("log").appendChild(elem);
}

＆＃13;

<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="react"></div>
<div id="log"></div>

＆＃13;

我试图解决的具体问题是我在Windows资源管理器中使用了左边是组名的界面，右边是所有组的所有项目列表。当我点击左侧的组名时，我想将右侧的列表滚动到相应的项目。请注意，左侧组和右侧项之间没有内部连接。它们只是同一数据的两种表示。为了做我想做的事情，当在左边单击一个元素时，我希望在右边找到元素并询问DOM在哪里，这样我就可以设置滚动偏移。我有足够的信息在右边找到元素但是当我尝试使用this.props.children迭代它们时，我发现它未定义。

请注意，在我的实际代码中，我没有在componentDidMount中运行此代码，代码会在响应鼠标单击时被调用

所以我的第一个解决方法是将EventEmitter传递给所有孩子，然后发出一个事件。可以很容易地在道具中传入registerYourselfWithParent函数，但是你还需要unregisterYourselfWithParent。我想其中的6个，另一个是1/2打的

Answer 1

动态地为您的子组件指定引用，例如React.createElement(Child, {content: "child A", ref:getRef()}, null),其中getRef是一个函数

var getRef = function(){ return 'Child-'+(refi++); }

然后使用Object.keys(this.refs).forEach()

循环参考

componentDidMount() {

    Object.keys(this.refs).forEach( (child) => {
      if(child !== 'self') {
      console.log(child);
      this.refs[child].someFunc();
       }
    });
  }

class Child extends React.Component {
  render() {
    return React.createElement('div', {}, this.props.content);
  }     
  someFunc() {
    console.log("child", this.props.content);
  }
}
           
class Parent extends React.Component {
  
  render() {
    var getRef = function(){ return 'Child-'+(refi++); },    refi=0;
   
    return React.createElement('div', {ref: 'self'}, 
      React.createElement(Child, {content: "child A", ref:getRef()}, null),
      React.createElement(Child, {content: "child B", ref: getRef()}, null),
      React.createElement(Child, {content: "child C", ref:getRef()}, null)
    );
  }
  componentDidMount() {
          
    Object.keys(this.refs).forEach( (child) => {
      if(child !== 'self') {
      console.log(child);
      this.refs[child].someFunc();
       }
    });
  }
}
            
ReactDOM.render(<Parent />, document.getElementById("react"));

function log(...args) {
  const elem = document.createElement("pre");
  elem.textContent = [...args].join(" ");
  document.getElementById("log").appendChild(elem);
}

<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="react"></div>
<div id="log"></div>

我希望它有助于你的事业

如何在React中调用所有孩子的函数

1 个答案: