阵营：获取目标的DOM儿童

假设你有一个HTML无序列表，你想从它创建一个阵营的元素：阵营：获取目标的DOM儿童

<ul id="mylist"> 
    <li><a href="">Something</a></li> 
    <li><a href="">Another thing</a></li> 
    <li><a href="">Third thing</a></li> 
</ul>

然后JS：

ReactDOM.render(<MyNewList />, document.getElementById('mylist'));

我'想要检索原始的HTML LIs并在我的MyNewList组件中使用它们。例如：

class MyNewList extends React.Component { 
    componentWillMount() { 
     let listArray = this.props.whatever 
    } 
    ... 
}

这可能吗？怎么样？

谢谢。

来源

2016-10-24 Ghan

这里是你如何能做到这一点：http://codepen.io/PiotrBerebecki/pen/BLbjEJ

这是一个粗略的结构，所以你就必须使之符合您的预期用途重构它一下。

HTML：

<body> 

    <ul id="mylist"> 
    <li><a href="">Something</a></li> 
    <li><a href="">Another thing</a></li> 
    <li><a href="">Third thing</a></li> 
    </ul> 

</body>

JS：

class MyNewList extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     myList: null 
    }; 
    } 

    componentWillMount() { 
    const myList = document.getElementById('mylist').children; 
    this.setState({ 
     myList: myList 
    }); 
    } 

    render() { 
    let renderList = 'Loading...' 

    if (this.state.myList) { 
     renderList = Array.prototype.map.call(this.state.myList, function(item) { 
     return (
      <li>{item.textContent} found in HTML</li> 
     ); 
     }); 
    } 

    return (
     <ul id="myNewlist"> 
     {renderList} 
     </ul> 
    ); 
    } 
} 

ReactDOM.render(
    <MyNewList />, 
    document.getElementById('mylist') 
);

来源

2016-10-24 22:22:37

嗨Piotr，是的！这将解决我的问题。请看看我发布的解决方案（在你之后的某个时刻）。它本质上是相同的想法，而是将节点列表作为通道传递给组件。 – Ghan

也有意义。祝一切顺利：） –

为什么不把这些李自己当成一个组件，并将它们用在当前的地方。那样你可以在其他地方重复使用它们吗？

class MyNewList extends React.Component { 
    componentWillMount() { 
    let listArray = this.props.whatever 
    } 
    render() { 
    return (<ul id="mylist"> 
     <li><a href="">Something</a></li> 
     <li><a href="">Another thing</a></li> 
     <li><a href="">Third thing</a></li> 
     </ul>) 
    }  
}

然后只要在任何你想使用它的地方弹出。

来源

2016-10-24 21:14:34

我在每个LI中都有相当的标记。内容由服务器决定。也许，我可以让服务器模板写入元标记，其中包含我需要的所有内容，但这很麻烦。另外，如果在这个页面上没有反应，我宁愿有一个优雅的回退。你有我的原始问题的解决方案吗？ – Ghan

这是我的解决方案（虽然如果别人找到一个更好的请留言！）：

JS：

let target = document.getElementById('mylist'); 
let liArray = target.getElementsByTagName('li'); 
ReactDOM.render(<MyNewList list={liArray} />, target);

然后在JSX

class MyNewList extends React.Component { 
    componentWillMount() { 
     let liArray = [...this.props.list], // converts nodelist into array 
      createMarkup = (el) => { return {__html: el}; }, // https://facebook.github.io/react/docs/dom-elements.html 
      convertedArray = liArray.map((slide) => { 
       return <div dangerouslySetInnerHTML={createMarkup(slide.outerHTML)} />; 
      }); 

     this.setState({ 
      list: convertedArray 
     }); 
    } 
    ... 
}

有被包裹在一个<div>每个项目的有点恼人的副作用，但我上面的调整，这样的结果是我的应用程序有效的HTML5语法。

来源

2016-10-24 22:25:49 Ghan

阵营：获取目标的DOM儿童

回答

相关问题