小编Fer*_*uza的帖子

如何在React Hooks中将道具更改为状态?

在简单的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)

基本上,我只需要更改描述道具,该道具来自另一个父组件以变为状态。请问,我能告诉我如何以新的方式像胡克斯一样去做吗?

reactjs react-hooks

17
推荐指数
2
解决办法
1万
查看次数

在react.js中实现HTML实体解码

我正在使用来自服务器的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)

html-entities reactjs

9
推荐指数
2
解决办法
1万
查看次数

通过单击文本如何将单击的文本更改为React.js中的另一个文本

我是React.js的新手,无法找到这个问题的任何答案.

我有一个评论博客,当我点击评论的标题时,标题应该改为另一个文本.我该怎么办?

评论和标题

text reactjs

8
推荐指数
1
解决办法
2万
查看次数

如何在reactjs中为列表添加和删除添加类?

在此处输入图片说明

例如,只需将活动类 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)

问题是我不知道如何为静态列表删除和添加类。你能帮我解决这个问题吗?

list reactjs

5
推荐指数
1
解决办法
9957
查看次数

在 react.js 中刷新页面后,某些文件(js、css、图像)未加载

我有问题,我正在使用 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)

reactjs react-router

2
推荐指数
1
解决办法
2802
查看次数

标签 统计

reactjs ×5

html-entities ×1

list ×1

react-hooks ×1

react-router ×1

text ×1