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

Question

所以我有来自服务器的数据:

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>

然后，有两个 react 组件。第一个组件 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 属性，并且来自服务器的信息是一个列表。那我怎么给他们加 key 呢？我的意思是，我是否必须编写一些代码来为每个项目添加一个 key ？

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

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

Answer 1

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

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