Question

假设您有一个HTML无序列表，并且您想从中创建一个React元素：

<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 LI并在MyNewList组件中使用它们。类似的东西：

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

这可能吗？怎么样？

感谢。

Answer 1

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

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>)
  }    
}

然后只需将其弹出到您想要使用的地方。

Answer 2

以下是如何实现这一目标：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')
);

Answer 3

这是我的解决方案（但如果其他人发现更好的请发帖！）：

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语法。

React：获取目标的DOM子项

3 个答案: