在简单的React类组件中,我们用来更改props以这种方式声明:
constructor(props) {
super(props)
this.state = {
pitch: props.booking.pitch,
email: props.booking.email,
firstName: props.booking.firstName,
arrivalDate: props.booking.arrivalDate
}
}
Run Code Online (Sandbox Code Playgroud)
但是我不知道如何在新功能中(如Hooks)执行此操作,但是我正在尝试以这种方式执行操作。
const GenerateDescHook = ({ description: initialDesc }) => {
const [description, setDescription] = useState(null)
useEffect(() => {
setDescription(initialDesc)
}, {})
function handleChangeVariance(newVariance) {
setDescription({
...description,
template: {
...description.template,
variance_name: newVariance,
},
})
}
}
Run Code Online (Sandbox Code Playgroud)
基本上,我只需要更改描述道具,该道具来自另一个父组件以变为状态。请问,我能告诉我如何以新的方式像胡克斯一样去做吗?
我正在使用来自服务器的API输出文本,并且我有一个管理员,其中包含用于促进填充内容的html字段.这里的问题是现在文本显示的是html代码.我如何摆脱那些未知的HTML代码.我想我必须使用html实体解码?我将如何在反应项目中实施?下面你看到文本不仅说明了文本和HTML代码.
export class FullInfoMedia extends React.Component {
render() {
const renderHTML = (escapedHTML: string) => React.createElement("div", { dangerouslySetInnerHTML: { __html: escapedHTML } });
return (
<div>
<div className="about-title">
<div className="container">
<div className="row">
<img className="center-block" src={this.props.about.image}/>
<h2>{this.props.about.title}</h2>
{renderHTML(<p>{this.props.about.body}</p>)}
</div>
</div>
</div>
</div>
);
}
}
Run Code Online (Sandbox Code Playgroud) 例如,只需将活动类 btw 切换到 li。但不是路由器。我有这样的列表,它不是带有 map() 方法的 cicle。它是静态列表。
constructor(props) {
super(props);
const parsedUrlQuery = window.location.pathname;
this.state = {
isActive: true
}
}
<ul className='bread list-inline'>
<li className={this.state.isActive ? 'navigation--active' : ''}>All projects</li>
<li> My projects</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
问题是我不知道如何为静态列表删除和添加类。你能帮我解决这个问题吗?
我有问题,我正在使用 react-router 通过单击链接“更多”来访问完整的信息新闻页面,在我更改这两个页面中的某些内容之前,所有内容都可以正常显示和呈现。
FullInfoNews.js
export class FullInfoNews extends React.Component {
render (){
return (
<div>
<div className="row">
<div className="about-title">
<div className="container">
<h2>{this.props.news.body}</h2>
<p>{this.props.news.title} </p>
<img className="center-block" src={this.props.news.image} />
</div>
</div>
</div>
</div>
);
}
}
Run Code Online (Sandbox Code Playgroud)
FullInfoNewsContainer.js
export default class FullInfoMediaContainer extends React.Component{
constructor(){
super();
this.state={
news:[]
}
}
componentDidMount(){
console.log('componentDidMount777');
const url='http://new-sciencepark.1gb.ru/api/getNewsById/'+this.props.params.id+'?lang=Ru' ;
superagent
.get(url)
.query(null)
.set('Accept', 'application/json')
.end ((error, response)=>{
const news=response.body.data.news
console.log(JSON.stringify(news));
this.setState({
news: news
})
})
}
render(){
console.log(this.props)
const {params}=this.props;
return(
<div>
{params.id}
<FullInfoNews news={this.state.news} /> …Run Code Online (Sandbox Code Playgroud)