无法在反应组件内的 html 中打印 javascript 变量文本

Question

I'm learning a backend administrative dashboard framework callled admin bro. So basically i am trying to make a tooltip component. And this is the code I have tried till now.

class Textbox extends React.PureComponent {
 

render() {
    const { property } = this.props;
    
    const ob = this.props.property.name
    const sentence = { 
        first : ' this is the first text ',
        second : ' this is second text',
        third: 'this is third text',
        fourth : 'this is the fourth text',
    }

    
    var line = sentence[ob]
       
    return (
        <script type="text/javascript">
            document.write(line)
        </script>
    )
  }
}

export default withTheme(Textbox)

In this ob has the values like first,second, third and fourth, so when it is sentence[ob] it means for example sentence[first] (when ob is first) so line then gets the corresponding text to it which is 'this is the first text'. I have consoled logged line and seen that this part is working perfectly.

Now I just have to display line inside the html code inside return.

I have tried to implement document.write() from this - how to display a javascript var in html body

But this doesn't work. What can I do?

Answer 1

I suggest you start with the React tutorials , it doesn't seem like you understand the syntax of React at all. In the render() method, you need to return jsx, which looks a lot like HTML but with slight differences. I don't know what you want to return, so I gave an example of what you can return, a div with the line variable you generated in your code.

Also, you need to note that the render() method runs every time there is an update to the virtual DOM, so you should only place logic in it if it's absolutely necessary.

class Textbox extends React.PureComponent {
    const { property } = this.props;
    
    const ob = property.name
    const sentence = { 
        first : ' this is the first text ',
        second : ' this is second text',
        third: 'this is third text',
        fourth : 'this is the fourth text',
    }

    
    var line = sentence[ob]
    render() {   
        return (
           <div className="line">{line}</div>
        )
    }
}

export default withTheme(Textbox)

Answer 2

The return method should always have one html parent tag (div in my example). This element can have as many children as you like, but can't have any siblings.

Then you can execute javascript statements by wrapping them in curly braces like so {javascript goes here}

So your code should be

return(
  <div>{line}</div>
)

Answer 3

React is using a template syntax called Mustache ({ }) single curly brackets to replace the javascript variable inside JSX element.

After that React does the rendering together with the value that you have binded using the embedded expression.

Embedding Expressions in JSX