如何在React中的JSON文件中的HTML字符串中放入动态值？

如何解决如何在React中的JSON文件中的HTML字符串中放入动态值？

编辑： 解决了

---

我需要用React中的Dynamic Values替换来自字符串的HTML块。该字符串来自JSON文件，因此我不能使用反引号。

例如： 我想用动态值替换文本__Replace__。

//Simplified for easy reading.
const jsonData = {content: '<div>Result = __Replace__ <div>'}
const [inputValue,setInputValue] = useState('')

function App() {
  return (
    </div>

       <input onChange={ setInputValue }>
       
       <div dangerouslySetInnerHTML={{ __html: jsonData.content }}></div>  

    </div>
  );
}

//So this: <div>Result = __Replace__ <div>
//Will render like

//Input Value: 1
Result = 1

//Input Value: 2
Result = 2

//Input value: 3
Result = 3

每次输入更改时，我都可以使用JS replace 方法来重新呈现整个文本，但是我认为这样做效率较低，就像本示例一样糟糕制作。 Code Sandbox

谢谢！

解决方法

我不清楚您的问题，但如果我是对的，请尝试以下操作：

function App() {

//A state that's going to be changed by the user with an input
const [name,setName] = useState('Jenell') //This replace the <b>Name</b> with a new Value
const [price,setPrice] = useState(100) //This replace the <b>Price</b> with a new Value

return (
    <div className="App">
        {/*Inputs for the users that change the states NAME and PRICE*/}
        <input type="text" value={name} onChange={(event) => setName(event.target.value)} />
        <input type="text" value={price} onChange={(event) => setPrice(event.target.value)} />


        <h3>Hello {name},the price is {price} .</h3>
        {/* 
  First rendered result should be:
  Hello Jenell,the price is 100*
  /}

  {/* If the user change the input,the text should change inmediately:
  Hello NewName,the price is NewPrice*/}

    </div>
);
}

,

您可以像这样使用bd919e5a4df2 wurstmeister/kafka:2.12-2.5.0 "start-kafka.sh" About a minute ago Up About a minute 0.0.0.0:9092->9092/tcp kafka-server 9b94b7dac237 wurstmeister/zookeeper:3.4.6 "/bin/sh -c '/usr/sb…" About a minute ago Up About a minute 22/tcp,2888/tcp,3888/tcp,0.0.0.0:2181->2181/tcp kafka-zookeeper ：

backticks

,

我找到了解决方法：react-jsx-parser

使用react-jsx-parser，我可以将JSX代码存储在简单的字符串中并存储在JSON文件中，因此我可以使用任何WYSIWYG编辑器编辑字符串，但仍然具有动态值。>

您可以在此处查看我的代码和文件： CodeSandbox

文本结构在JSON文件中。

我正在使用带有Context API而不是props的组件，因为如果我使用props，则会重新呈现整个文本。

Gif Preview

我希望有人觉得这有用。