如何使用 ReactJS 操作来自服务器的 HTML 数据答案

【问题标题】：How to manipulate HTML data that comes from the server using ReactJS如何使用 ReactJS 操作来自服务器的 HTML 数据
【发布时间】：2018-03-29 15:29:10
【问题描述】：

所以我有这些来自服务器的数据：

const userInfo = getUserInfo(); //Returns: <span class="info">His name is Sam</span><span class="info">He is 20 years old</span><span class="info">He is from Spain</span><span class="info">He is fluent in English</span>

然后，有两个反应组件。第一个 ListInfo 显示所有用户信息，如果将第二个组件 ShowMore 添加到页面，则 ListInfo 应该只显示前两条信息。

class ListInfo extends React.Component {
  render() {
    return (
      const info = this.props.info; 
      <div className="ListInfo">
        {info}
        <ShowMore items={info} />
      </div>
    );
  }
}

class ShowMore extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isDisplayingAll: true
    };

    this.handleDisplaying = this.handleDisplaying.bind(this);
  }

  componentDidMount() {
    this.setState({
      isDisplayingAll: false
    });
  }

  handleDisplaying(e) {

  }

  render() {
    return (
      <button onClick={this.handleDisplaying}>
        {this.state.isDisplayingAll ? 'Less' : 'More'}
      </button>
    );
  }
}

ReactDOM.render(
  <ListInfo info={userInfo} />,
  document.getElementById('root')
);

那么问题来了：

首先，react 文档说，如果要渲染列表项，则应该添加一个 key 属性，并且来自服务器的信息是一个列表。那么我怎样才能给他们添加一个密钥呢？我的意思是，我必须编写一些代码来为每个项目添加一个键吗？

其次，我不应该更改组件获取的props，那么我应该如何更改DOM元素（最后两个）的样式？

第三，具有class 而不是className 的元素会在渲染中产生问题吗？

【问题讨论】：

我从未见过使用class 代替className 会导致问题，但基本原理是class 是JS 中的保留关键字（其中JSX 是扩展）。你会收到一个丑陋的警告

标签： javascript reactjs

【解决方案1】：

我认为最好的办法是设置后端以 JSON 格式提供数据。然后你可以写出 JSX 以避免语法差异的问题。

如果您出于某种原因绝对受限于 HTML，我过去曾成功使用 react-magic 将 HTML 转换为 JSX。如果你想要的话，我想我有一个 webpack 加载器。

【讨论】：

【解决方案2】：

我相信您在 JSX、React 使用的内容和实际 HTML 之间存在脱节。尽管 React 看起来在 JS 中使用 HTML，但实际上它使用了一些编译器技巧将 HTML 转换为 JS 语句。这解释了你的第一个问题和第三个问题。

查看此页面，了解 React 背后的实际情况。 https://reactjs.org/docs/react-without-jsx.html

有一种方法可以直接在组件中使用从服务器返回的 HTML。我会阅读此处的文档以了解如何操作以及这样做的利弊。
https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

通常组件会公开一个样式属性，允许您覆盖默认样式。我会查看文档以查看您要设置样式的组件是否具有样式属性。

【讨论】：