Question

我有一个json文件，其中包含一个数组，其中包含一些名为json.bc的对象，由fetch（）请求显示。正如您在每一项中看到的，我拥有{this.state.resultrule[i]}的值是handlerule功能。 return_rule的结果包含一些文本。在console.log(return_rule)中，结果是这样的：

description: Know Before You Go <ul> <li>The property has connecting/adjoining rooms, which are subject to availability and can be requested by contacting the property using the number on the booking confirmation. </li> </ul> - Shared Dormitory, Mixed Dorm (8 Bed)<ul><li>Free WiFi</li><li>Free Breakfast</li></ul> 

<div className="resultrule" key={i}>{this.state.resultrule[i]}</div>的文本包含一些带有自己标签的文本，但是我不想在结果中显示标签。不用标签但样式为 ，和其他标签的我该怎么办？

class App extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        data: [],
        library: null,
        resultrule: {},

    };

}
componentDidMount() {
    fetch('/json.bc', {
        method: 'POST',
    })
        .then(response => response.text())
        .then(text => {
            let Maindata = JSON.parse(text.replace(/\'/g, '"'))
            this.setState(state => ({
                ...state,
                data: Maindata
            }), () => {
                this.reorganiseLibrary()

            })
        }).catch(error => console.error(error))



}
reorganiseLibrary = () => {
    const { data } = this.state;
    let library = data;

    library = _.chunk(library);
    this.setState({
        library,

    })
}

renderLibrary = () => {
    const { library} = this.state;

    if (!library || (library && library.length === 0)) {
        return <div className="nodata"> Nodata</div>
    }
    return library.map((item, i) => (
        <div className="item">
            <span key={i} onClick={e => this.handlerule(e, item, i)}>Click</span>
            <div className="resultrule" key={i}>{this.state.resultrule[i]}</div>
        </div>
    ))
}

render() {
    const { library } = this.state;
    return (
        <div>
            {this.renderLibrary()}
        </div>
    )
}
handlerule = (e, item, i) => {
    let mainprovider = item.id.provider
    let optionId = item.optionId
    let return_rule = function () {
        let tmp = null;
        $.ajax({
            'async': false,
            'type': "POST",
            'global': false,
            'dataType': 'html',
            'url': "rule.bc",
            'data': { 'mainprovider': JSON.stringify(mainprovider), 'optionId': optionId, },
            'success': (response) => {
                tmp = response;
            }
        })
        return tmp;
    }();
    return this.setState(prevState => ({
        resultrule: { ...prevState.resultrule, [i]: return_rule },
    }))
   }
  }
  ReactDOM.render(<App />, document.getElementById('Result'));

<br/> HTML代码在ReactJs中

0 个答案: