危险地反应 SetInnerHTML 不重新呈现内容

Question

Here's my setup:

string-file.properties

someKey=This is my <span class="hello">{0}</span> string!

react-file.jsx

import stringAPI from 'string-file';    

class MyComponent extends Component {

    get content() {
        return { __html: stringAPI.someKey(this.props.word) };
    }

    render() {
        return (
            <span dangerouslySetInnerHTML={this.content} />
        );
    }
}

The argument to stringAPI.someKey get substituted for {0} in the string file and then the final html string is returned. My issue is that this.props.word is being updated while MyComponent is not being updated.

I read somewhere that dangerouslySetInnerHTML tells React that it doesn't need to watch the state of the component that the html is rendered in. If that's true, then I still need a way to do what I'm trying to do.

Answer 1

Set the string as state. When receive new props ( componentWillReceiveProps ) do a setState . This should rerender the component. If that is not working make sure a unique key is set when the string changes. This also forces a rerender

Answer 2

After adding unique key on div it's working fine.