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

我有来自服务器的数据：

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>

constuserinfo=getUserInfo（）//返回：他的名字是萨米，他20岁，来自西班牙，英语流利

然后，有两个反应组分。第一个组件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')
);

类ListInfo扩展了React.Component{
render（）{
返回(
const info=this.props.info；
{info}
);
}
}
类ShowMore扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
isDisplayingAll:对
};
this.handledisplay=this.handledisplay.bind（this）；
}
componentDidMount（）{
这是我的国家({
isDisplayingAll:false
});
}
手动显示（e）{
}
render（）{
返回(
{this.state.isDisplayingAll？'Less'：'More'}
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

所以问题来了：

首先，react文档说，如果要呈现列表项，那么应该添加一个键属性，并且来自服务器的信息是一个列表。那么我怎样才能为它们添加一个键呢？我的意思是，我需要写一些代码来为每个项目添加一个键吗

其次，我不应该更改组件获得的

道具，那么我应该如何更改DOM元素的样式（最后两个）

第三，使用
class
而不是
className
的元素是否会在呈现时产生问题？
我相信您在JSX、React使用的内容和实际HTML之间存在着断开连接。尽管React看起来在JS内部使用HTML，但实际上它使用了一些编译器技巧将HTML转换为JS语句。这就解释了你的第一个问题和第三个问题

看看这一页，看看React引擎盖下到底发生了什么。

有一种方法可以在组件中直接使用从服务器返回的HTML。我会仔细阅读这里的文档，看看如何做，以及这样做的利弊。


通常，零部件会显示一个样式道具，允许您替代默认样式。我会查看文档，看看您想要设置样式的组件是否有样式道具。
我认为最好的办法是设置后端，将数据作为JSON提供。然后您可以编写JSX以避免语法差异问题

如果您出于某种原因完全受限于HTML，我在过去成功地使用它将HTML转换为JSX。如果你需要的话，我想我在这里的某个地方有一个网页包加载器。
我从未见过使用
class
而不是
className
会导致问题，但基本原理是class是JS中的一个保留关键字（JSX是其中的一个扩展）。你会得到一个丑陋的警告